---
schema_version: "1"
id: 0e004d595d9d9e36784b5d0c8b578aa876778bec1e879947e9a51b9bb2fce6e3
title: Layouts
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/commerce-cloud/b2c-commerce/guides/customer-service-center/b2c-csc-layouts.md
canonical_url: https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/b2c-csc-layouts.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 93bd46be52e41ba44b38aea10f852ec65289c2590a465977bd4570b850e8b6cf
products:
  - Composable Storefront
  - Salesforce APIs
---
# Layouts

Define all visible elements in the layout section. The elements are structured in rows spread across a 12-column grid.

There can be:

- Form elements inside an attribute form widget
- Attributes inside a layout widget
- Specialized widgets for certain customizable areas

By using `width` on an element, modify the number of columns this element occupies. Embed widgets inside a layout or form widget, for example, a product_unit_price inside a form widget. For advanced configuration, both rows and cells can also have conditions to show elements based on the value of attributes.

## Layout Row Configuration

The following table describes layout row configuration:

| Name      | Type   | Description                                |
| --------- | ------ | ------------------------------------------ |
| layout    | array  | As array of layout columns                 |
| condition | string | An expression to switch the row visibility |

## Layout Column Configuration

The following table describes layout column configuration:

<table><thead><tr><th>Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>id</td><td>string</td><td>The widget ID</td></tr><tr><td>attribute</td><td>string</td><td>The attribute reference inside a form or layout widget

```json
"layout": [
{
"attribute": "content1"
}
]
```

</td></tr><tr><td>width</td><td>integer (1 <= width <= 12)</td><td>Number of grid cells the column occupies</td></tr><tr><td>offset</td><td>integer (1 <= width <= 12)</td><td>Number of grid sets to leave empty before this element. Either Offset + Width total 12 or "end".

```json
"layout": [
  {
    "attribute": "content1",
    "width": 6
  },
  {
    "attribute": "content2",
    "width": 6
  },
  {
    "attribute": "content3",
    "width": 6,
    "offset": 6
  }
]
```

</td></tr><tr><td>end</td><td>Boolean</td><td>Specify to leave empty until the end of the row.

```json
"layout": [
  {
    "attribute": "content1",
    "width": 6,
    "end": true
  },
  {
    "attribute": "content2",
    "width": 6
  },
  {
    "attribute": "content3",
    "width": 6
  }
]
```

</td></tr><tr><td>condition</td><td>string</td><td>An expression to switch the row visibility.</td></tr></tbody></table>

## Layout Conditions

Layout conditions include the following:

| Operator | Description                                                                                                                        | Example      |
| -------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------ |
| >        | Greater than operator. Evaluates to true if the left side is greater that the right side.                                          | 5 > 3        |
| >=       | Greater than or equal to operator. Evaluates to true if the left side is greater than or equal to the right side.                  | 5 >= 5       |
| \<       | Less than operator. Evaluates to true if the left side is less than the right side.                                                | 3 \< 5       |
| \<=      | Less than or equal to operator. Evaluates to true if the left side is less than or equal to the right side.                        | 3 \<= 3      |
| ==       | Equality comparison. Returns true if the left side equals the right side. Does not check type equality.                            | 3 == '3'     |
| !=       | Inequality comparison. Returns true if the left side equals the value and type of the right side. Does not check type inequality.  | 3 != 2       |
| ===      | Strict equality comparison. Returns true if the left side equals the value and type of the right side.                             | 3 === 3      |
| !==      | Strict inequality comparison. Returns true if the left side doesn't equal the value of the right side and both types are the same. | 3 !== '3'    |
| !        | Negation operator. Negates the Boolean value.                                                                                      | !true        |
| &&       | Logical AND operator.                                                                                                              | true && true |

The following sample condition would hide the associated widget until the current product doesn't require variation selection anymore.

```
"condition": "!type.master"
```

## Configuring Width

You use the `width` property to specify how many columns an element spans.

The following is an example of specifying the width. Because of the nested layout, the same result would be achieved without `width`.

```json
{
  "id": "address",
  "layout": [
    {
      "layout": [
        {
          "attribute": "first_name",
          "width": 6
        },
        {
          "attribute": "last_name",
          "width": 6
        }
      ]
    },
    {
      "layout": [
        {
          "attribute": "postal_code",
          "width": 6
        },
        {
          "attribute": "city",
          "width": 6
        }
      ]
    }
  ]
}
```

The following is a sample for `width` without nested layouts:

```json
{
  "id": "address",
  "layout": [
    {
      "attribute": "first_name",
      "width": 6
    },
    {
      "attribute": "last_name",
      "width": 6
    },
    {
      "attribute": "postal_code",
      "width": 6
    },
    {
      "attribute": "city",
      "width": 6
    }
  ]
}
```

It results in a layout like this:

![Example billing address layout with address fields spanning 6 columns using the width property](https://developer.salesforce.com/media/b2c-commerce/b2c_customer_service_center_billing_address_width_6.png)

## Combining Elements

By using the property `suppress_new_column`, combine multiple elements in one cell. Each element with the property `suppress_new_column:true` is added to the cell of the previous element.

```json
{
  "id": "address",
  "layout": [
    {
      "layout": [
        {
          "attribute": "first_name"
        },
        {
          "attribute": "last_name",
          "suppress_new_column": true
        }
      ]
    },
    {
      "layout": [
        {
          "attribute": "postal_code"
        },
        {
          "attribute": "city",
          "suppress_new_column": true
        }
      ]
    }
  ]
}
```

Each element with the property `suppress_new_column:true` is added to the cell of the previous element.

![Example billing address layout showing suppress_new_column combining first name and last name into one cell](https://developer.salesforce.com/media/b2c-commerce/b2c_customer_service_center_billing_address_suppress_column.png)