Grid

An invisible framework responsible for the order and rhythm of our pages. By imposing constraints on layout, the grid makes it easy to achieve consistent and proportionate designs from page-to-page, and across devices.

styleKeys: grid

UsageGuidelinesAPI

Use Grid...

To promote visual consistency from page to page.
To achieve design flexibility.
To arrange elements within the Bounded Content.

Don't use Grid...

Around full width elements (navigation, footer, Promo Bar, Banner).
Within Carousel (not supported).
To lay out form fields. Use Form instead.

Structure

SWAN’s Grid organizes content into Rows, each comprising up to 12 Columns, separated by a standard Gutter. The Grid consists of three subcomponents:

GridContainer: this is the root element of the Grid. All its children should be Rows.
Row: represents a single row within the GridContainer. Each Row should exclusively contain Columns.
Column: serves as a column within a Row. It can hold any type of content, including a Nested Grid for more complex layouts.

Grid Container

Divider

Use dividers to add vertical lines between each Column.

ReactVanilla

<GridContainer dividers>
  <Row>
    <Column span={4}>Element 1</Column>
    <Column span={4}>Element 2</Column>
    <Column span={4}>Element 3</Column>
  </Row>
</GridContainer>

<GridContainer dividers>
  <Row>
    <Column span={4}>Element 1</Column>
    <Column span={4}>Element 2</Column>
    <Column span={4}>Element 3</Column>
  </Row>
</GridContainer>

<div class="swan-grid-container swan-grid-dividers">
  <div class="swan-row">
    <div class="swan-col-4">Element 1</div>
    <div class="swan-col-4">Element 2</div>
    <div class="swan-col-4">Element 3</div>
  </div>
</div>

<div class="swan-grid-container swan-grid-dividers">
  <div class="swan-row">
    <div class="swan-col-4">Element 1</div>
    <div class="swan-col-4">Element 2</div>
    <div class="swan-col-4">Element 3</div>
  </div>
</div>

Tight gutter

Use gutter="tight" to narrow the gutter between Columns. Only use with Standard Tiles, with skin="product".

ReactVanilla

<GridContainer gutter="tight">
  <Row>
    <Column span={4} bgc="black">
      <Box bgc="strong">Element 1</Box>
    </Column>
    <Column span={4} bgc="black">
      <Box bgc="strong">Element 2</Box>
    </Column>
    <Column span={4} bgc="black">
      <Box bgc="strong">Element 3</Box>
    </Column>
  </Row>
</GridContainer>

<GridContainer gutter="tight">
  <Row>
    <Column span={4} bgc="black">
      <Box bgc="strong">Element 1</Box>
    </Column>
    <Column span={4} bgc="black">
      <Box bgc="strong">Element 2</Box>
    </Column>
    <Column span={4} bgc="black">
      <Box bgc="strong">Element 3</Box>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container swan-grid-container-tight">
  <div class="swan-row">
    <div class="swan-col-4 swan-bgc-black">
      <div class="swan-bgc-strong">Element 1</div>
    </div>
    <div class="swan-col-4 swan-bgc-black">
      <div class="swan-bgc-strong">Element 2</div>
    </div>
    <div class="swan-col-4 swan-bgc-black">
      <div class="swan-bgc-strong">Element 3</div>
    </div>
  </div>
</div>

<div class="swan-grid-container swan-grid-container-tight">
  <div class="swan-row">
    <div class="swan-col-4 swan-bgc-black">
      <div class="swan-bgc-strong">Element 1</div>
    </div>
    <div class="swan-col-4 swan-bgc-black">
      <div class="swan-bgc-strong">Element 2</div>
    </div>
    <div class="swan-col-4 swan-bgc-black">
      <div class="swan-bgc-strong">Element 3</div>
    </div>
  </div>
</div>

Row

Overflow

A Row will display only 12 columns' worth of content per row, but it can contain more than 12. Any extra content will wrap down onto the next line.

Sticky

Use sticky to make a Column remain on screen during scrolling, as long as another element in the same row is also visible.

Important: use the sticky property on both Row and Column to achieve this behavior.

Column

Span

In the React API, use span={*} (0~12) to specify how many grid column a Column spans. In addition, use spanX={*} to override the column span at a given screen size, where * is the number of columns.

span: sets the default size for the Column
spanXs: overrides the default size on XS screens (default: 12)
spanSm: overrides the default size on SM screens
spanMd: overrides the default size on MD screens
spanLg: overrides the default size on LG screens
spanXl: overrides the default size on XL screens

In the Vanilla API, use the swan-col-* (0~12) to specify how many grid column a column spans. In addition, use swan-col-X-* to override the column span at a given screen size, where X is the screen size and * is the number of columns.

swan-col-xs-*: overrides the default size on XS screens (default: 12)
swan-col-sm-*: overrides the default size on SM screens
swan-col-lg-*: overrides the default size on MD screens
swan-col-lg-*: overrides the default size on LG screens
swan-col-xl-*: overrides the default size on XL screens

ReactVanilla

<GridContainer>
  <Row>
    <Column span={12} spanMd={6} spanLg={3} bgc="strong">
      <Box bgc="promo">
        Span 12/12 by default
        <br />
        MD: Span 6/12
        <br />
        LG: Span 3/12
      </Box>
    </Column>
    <Column span={12} spanMd={6} spanLg={9} bgc="strong">
      <Box bgc="promo">
        Span 12/12 by default
        <br />
        MD: Span 6/12
        <br />
        LG: Span 9/12
      </Box>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={12} spanMd={6} spanLg={3} bgc="strong">
      <Box bgc="promo">
        Span 12/12 by default
        <br />
        MD: Span 6/12
        <br />
        LG: Span 3/12
      </Box>
    </Column>
    <Column span={12} spanMd={6} spanLg={9} bgc="strong">
      <Box bgc="promo">
        Span 12/12 by default
        <br />
        MD: Span 6/12
        <br />
        LG: Span 9/12
      </Box>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-12 swan-col-md-6 swan-col-lg-3 swan-bgc-strong">
      <div class="swan-bgc-promo">
        Span 12/12 by default <br />MD: Span 6/12 <br />LG: Span 3/12
      </div>
    </div>
    <div class="swan-col-12 swan-col-md-6 swan-col-lg-9 swan-bgc-strong">
      <div class="swan-bgc-promo">
        Span 12/12 by default <br />MD: Span 6/12 <br />LG: Span 9/12
      </div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-12 swan-col-md-6 swan-col-lg-3 swan-bgc-strong">
      <div class="swan-bgc-promo">
        Span 12/12 by default <br />MD: Span 6/12 <br />LG: Span 3/12
      </div>
    </div>
    <div class="swan-col-12 swan-col-md-6 swan-col-lg-9 swan-bgc-strong">
      <div class="swan-bgc-promo">
        Span 12/12 by default <br />MD: Span 6/12 <br />LG: Span 9/12
      </div>
    </div>
  </div>
</div>

Use a single Row to safely contain content exceeding 12 columns. The Row will display the first 12 columns, then automatically wrap any additional content onto the next line.

ReactVanilla

<GridContainer>
  <Row>
    <Column span={4} bgc="strong">
      <Box bgc="promo">Span 4/12</Box>
    </Column>
    <Column span={4} bgc="strong">
      <Box bgc="promo">Span 4/12</Box>
    </Column>
    <Column span={4} bgc="strong">
      <Box bgc="promo">Span 4/12</Box>
    </Column>
    <Column span={4} bgc="strong">
      <Box bgc="promo">Span 4/12</Box>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={4} bgc="strong">
      <Box bgc="promo">Span 4/12</Box>
    </Column>
    <Column span={4} bgc="strong">
      <Box bgc="promo">Span 4/12</Box>
    </Column>
    <Column span={4} bgc="strong">
      <Box bgc="promo">Span 4/12</Box>
    </Column>
    <Column span={4} bgc="strong">
      <Box bgc="promo">Span 4/12</Box>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-4 swan-bgc-strong">
      <div class="swan-bgc-promo">Span 4/12</div>
    </div>
    <div class="swan-col-4 swan-bgc-strong">
      <div class="swan-bgc-promo">Span 4/12</div>
    </div>
    <div class="swan-col-4 swan-bgc-strong">
      <div class="swan-bgc-promo">Span 4/12</div>
    </div>
    <div class="swan-col-4 swan-bgc-strong">
      <div class="swan-bgc-promo">Span 4/12</div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-4 swan-bgc-strong">
      <div class="swan-bgc-promo">Span 4/12</div>
    </div>
    <div class="swan-col-4 swan-bgc-strong">
      <div class="swan-bgc-promo">Span 4/12</div>
    </div>
    <div class="swan-col-4 swan-bgc-strong">
      <div class="swan-bgc-promo">Span 4/12</div>
    </div>
    <div class="swan-col-4 swan-bgc-strong">
      <div class="swan-bgc-promo">Span 4/12</div>
    </div>
  </div>
</div>

Offset

In the React API, use offset={*} (0~12) to create an indentation or widen the gap between grid elements. This property shifts a block to the right by a specified number of column widths. In addition, use offsetX={*} to create an offset for a certain screen size, where X is the screen size and * the number of column offset.

offset is ignored on XS screens.
offsetSm: creates an offset on SM screens.
offsetMd: creates an offset on MD screens.
offsetLg: creates an offset on LG screens.
offsetXl: creates an offset on XL screens.

In the Vanilla API, use the swan-col-offset-* (0~12) class together with the swan-col-* class. In addition, use the swan-col-X-offset-* class to create an offset for a certain screen size, where X is the screen size and * the number of column offset.

swan-col-offset is ignored on XS screens.
swan-col-sm-offset-*: creates an offset on SM screens.
swan-col-md-offset-*: creates an offset on MD screens.
swan-col-lg-offset-*: creates an offset on LG screens.
swan-col-xl-offset-*: creates an offset on XL screens.

ReactVanilla

<GridContainer>
  <Row>
    <Column span={3} bgc="strong">
      <Box bgc="promo">Span 3/12</Box>
    </Column>
    <Column span={7} offset={2} spanSm={9} offsetSm={0} bgc="strong">
      <Box bgc="promo">
        Span 7/12 with an offset of 2<br />
        SM: Span 9/12, no offset
      </Box>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={3} bgc="strong">
      <Box bgc="promo">Span 3/12</Box>
    </Column>
    <Column span={7} offset={2} spanSm={9} offsetSm={0} bgc="strong">
      <Box bgc="promo">
        Span 7/12 with an offset of 2<br />
        SM: Span 9/12, no offset
      </Box>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-3 swan-bgc-strong">
      <div class="swan-bgc-promo">Span 3/12</div>
    </div>
    <div
      class="swan-col-7 swan-col-sm-9 swan-col-offset-2 swan-col-sm-offset-0 swan-bgc-strong"
    >
      <div class="swan-bgc-promo">
        Span 7/12 with an offset of 2<br />SM: Span 9/12, no offset
      </div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-3 swan-bgc-strong">
      <div class="swan-bgc-promo">Span 3/12</div>
    </div>
    <div
      class="swan-col-7 swan-col-sm-9 swan-col-offset-2 swan-col-sm-offset-0 swan-bgc-strong"
    >
      <div class="swan-bgc-promo">
        Span 7/12 with an offset of 2<br />SM: Span 9/12, no offset
      </div>
    </div>
  </div>
</div>

Push / Pull

In the React API, use push={*} (rightward shift) and pull={*} (leftward shift) to reorder Columns in a Row, to change page layout on different screen sizes. In addition, use pushX={*} and pullX={*} to reorder them across different screen sizes, where X is the screen size and * the number of column by which the element is pushed or pulled.

push and pull are ignored on XS screens.
pushSm and pullSm: change the column order on SM screens.
pushMd and pullMd: change the column order on MD screens.
pushLg and pullLg: change the column order on LG screens.
pushXl and pullXl: change the column order on XL screens.

In the Vanilla API, use swan-col-push-* (rightward shift) and swan-col-pull-* (leftward shift) to reorder Columns in a Row. In addition, use swan-col-X-push-* and swan-col-X-pull-* to reorder them across different screen sizes, where X is the screen size and * the number of column by which the element is pushed or pulled.

swan-col-push-* and swan-col-pull-* is ignored on XS screens.
swan-col-sm-push-* and swan-col-sm-pull-*: change the column order on SM screens.
swan-col-md-push-* and swan-col-md-pull-*: change the column order on MD screens.
swan-col-lg-push-* and swan-col-lg-pull-*: change the column order on LG screens.
swan-col-xl-push-* and swan-col-xl-pull-*: change the column order on XL screens.

ReactVanilla

<GridContainer>
  <Row>
    <Column bgc="strong" span={6} spanXs={12} pushMd={6} pushLg={6}>
      <Box bgc="promo">
        SM: on the left
        <br />
        MD and LG: pushed to the right
      </Box>
    </Column>
    <Column bgc="strong" span={6} spanXs={12} pullMd={6} pullLg={6}>
      <Box bgc="promo">
        SM: on the right
        <br />
        MD and LG: pulled to the left
      </Box>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column bgc="strong" span={6} spanXs={12} pushMd={6} pushLg={6}>
      <Box bgc="promo">
        SM: on the left
        <br />
        MD and LG: pushed to the right
      </Box>
    </Column>
    <Column bgc="strong" span={6} spanXs={12} pullMd={6} pullLg={6}>
      <Box bgc="promo">
        SM: on the right
        <br />
        MD and LG: pulled to the left
      </Box>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div
      class="swan-col-6 swan-col-xs-12 swan-col-md-push-6 swan-col-lg-push-6 swan-bgc-strong"
    >
      <div class="swan-bgc-promo">
        SM: on the left <br />MD and LG: pushed to the right
      </div>
    </div>
    <div
      class="swan-col-6 swan-col-xs-12 swan-col-md-pull-6 swan-col-lg-pull-6 swan-bgc-strong"
    >
      <div class="swan-bgc-promo">
        SM: on the right <br />MD and LG: pulled to the left
      </div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div
      class="swan-col-6 swan-col-xs-12 swan-col-md-push-6 swan-col-lg-push-6 swan-bgc-strong"
    >
      <div class="swan-bgc-promo">
        SM: on the left <br />MD and LG: pushed to the right
      </div>
    </div>
    <div
      class="swan-col-6 swan-col-xs-12 swan-col-md-pull-6 swan-col-lg-pull-6 swan-bgc-strong"
    >
      <div class="swan-bgc-promo">
        SM: on the right <br />MD and LG: pulled to the left
      </div>
    </div>
  </div>
</div>

Sticky

Use sticky to make a Column remain on screen during scrolling, as long as another element in the same row is also visible. Be aware that enabling stickiness alters the default behavior of the row: it won't vertically stretch all its columns to the same height.

Important: use the sticky property on both Row and Column to achieve this behavior.

In the React API, use unsticky="xs" on the Column to override the sticky behavior on Extra-Small screens.

In the Vanilla API, add the class swan-col-unsticky-xs to the swan-col-* class to override the sticky behavior on Extra-Small screens.

ReactVanilla

<GridContainer>
  <Row sticky>
    <Column span={6} bgc="promo" sticky unsticky="xs">
      <Box bgc="strong">Sticky column</Box>
    </Column>
    <Column span={6} bgc="promo">
      <Box bgc="strong" style={{ padding: '0 0 900px 0' }}>
        Column in the same row that has really tall content. Lorem ipsum dolor
        sit amet, consectetur adipiscing elit. Suspendisse auctor mattis magna,
        sollicitudin feugiat ante faucibus eget. Donec eget tincidunt nisi.
        Curabitur augue dui, condimentum in suscipit non, consequat at tellus.
        Duis massa augue, efficitur nec magna gravida, porttitor dapibus sem.
        Integer lacus magna, sodales at pretium quis, lacinia vitae ante. Sed
        dapibus tortor ut molestie mollis. Vestibulum a interdum est, ac semper
        sapien. In leo velit, vestibulum quis erat at, tempus lacinia sapien.
      </Box>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row sticky>
    <Column span={6} bgc="promo" sticky unsticky="xs">
      <Box bgc="strong">Sticky column</Box>
    </Column>
    <Column span={6} bgc="promo">
      <Box bgc="strong" style={{ padding: '0 0 900px 0' }}>
        Column in the same row that has really tall content. Lorem ipsum dolor
        sit amet, consectetur adipiscing elit. Suspendisse auctor mattis magna,
        sollicitudin feugiat ante faucibus eget. Donec eget tincidunt nisi.
        Curabitur augue dui, condimentum in suscipit non, consequat at tellus.
        Duis massa augue, efficitur nec magna gravida, porttitor dapibus sem.
        Integer lacus magna, sodales at pretium quis, lacinia vitae ante. Sed
        dapibus tortor ut molestie mollis. Vestibulum a interdum est, ac semper
        sapien. In leo velit, vestibulum quis erat at, tempus lacinia sapien.
      </Box>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row swan-row-sticky">
    <div class="swan-col-6 swan-col-sticky swan-col-unsticky-xs swan-bgc-promo">
      <div class="swan-bgc-strong">Sticky column</div>
    </div>
    <div class="swan-col-6 swan-bgc-promo">
      <div class="swan-bgc-strong" style="padding: 0px 0px 900px;">
        Column in the same row that has really tall content. Lorem ipsum dolor
        sit amet, consectetur adipiscing elit. Suspendisse auctor mattis magna,
        sollicitudin feugiat ante faucibus eget. Donec eget tincidunt nisi.
        Curabitur augue dui, condimentum in suscipit non, consequat at tellus.
        Duis massa augue, efficitur nec magna gravida, porttitor dapibus sem.
        Integer lacus magna, sodales at pretium quis, lacinia vitae ante. Sed
        dapibus tortor ut molestie mollis. Vestibulum a interdum est, ac semper
        sapien. In leo velit, vestibulum quis erat at, tempus lacinia sapien.
      </div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row swan-row-sticky">
    <div class="swan-col-6 swan-col-sticky swan-col-unsticky-xs swan-bgc-promo">
      <div class="swan-bgc-strong">Sticky column</div>
    </div>
    <div class="swan-col-6 swan-bgc-promo">
      <div class="swan-bgc-strong" style="padding: 0px 0px 900px;">
        Column in the same row that has really tall content. Lorem ipsum dolor
        sit amet, consectetur adipiscing elit. Suspendisse auctor mattis magna,
        sollicitudin feugiat ante faucibus eget. Donec eget tincidunt nisi.
        Curabitur augue dui, condimentum in suscipit non, consequat at tellus.
        Duis massa augue, efficitur nec magna gravida, porttitor dapibus sem.
        Integer lacus magna, sodales at pretium quis, lacinia vitae ante. Sed
        dapibus tortor ut molestie mollis. Vestibulum a interdum est, ac semper
        sapien. In leo velit, vestibulum quis erat at, tempus lacinia sapien.
      </div>
    </div>
  </div>
</div>

Flex column

Use flexColumn to evenly distribute the content of a column vertically in relation to others.

ReactVanilla

<GridContainer>
  <Row>
    <Column span={6} bgc="promo" flexColumn>
      <Box bgc="strong">Element 1</Box>
      <Box bgc="strong">Element 2</Box>
      <Box bgc="strong">Element 3</Box>
    </Column>
    <Column span={6} bgc="promo">
      <Box bgc="strong">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
        auctor mattis magna, sollicitudin feugiat ante faucibus eget. Donec eget
        tincidunt nisi. Curabitur augue dui, condimentum in suscipit non,
        consequat at tellus. Duis massa augue, efficitur nec magna gravida,
        porttitor dapibus sem.
      </Box>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={6} bgc="promo" flexColumn>
      <Box bgc="strong">Element 1</Box>
      <Box bgc="strong">Element 2</Box>
      <Box bgc="strong">Element 3</Box>
    </Column>
    <Column span={6} bgc="promo">
      <Box bgc="strong">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
        auctor mattis magna, sollicitudin feugiat ante faucibus eget. Donec eget
        tincidunt nisi. Curabitur augue dui, condimentum in suscipit non,
        consequat at tellus. Duis massa augue, efficitur nec magna gravida,
        porttitor dapibus sem.
      </Box>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-6 swan-col-flex-column swan-bgc-promo">
      <div class="swan-bgc-strong">Element 1</div>
      <div class="swan-bgc-strong">Element 2</div>
      <div class="swan-bgc-strong">Element 3</div>
    </div>
    <div class="swan-col-6 swan-bgc-promo">
      <div class="swan-bgc-strong">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
        auctor mattis magna, sollicitudin feugiat ante faucibus eget. Donec eget
        tincidunt nisi. Curabitur augue dui, condimentum in suscipit non,
        consequat at tellus. Duis massa augue, efficitur nec magna gravida,
        porttitor dapibus sem.
      </div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-6 swan-col-flex-column swan-bgc-promo">
      <div class="swan-bgc-strong">Element 1</div>
      <div class="swan-bgc-strong">Element 2</div>
      <div class="swan-bgc-strong">Element 3</div>
    </div>
    <div class="swan-col-6 swan-bgc-promo">
      <div class="swan-bgc-strong">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
        auctor mattis magna, sollicitudin feugiat ante faucibus eget. Donec eget
        tincidunt nisi. Curabitur augue dui, condimentum in suscipit non,
        consequat at tellus. Duis massa augue, efficitur nec magna gravida,
        porttitor dapibus sem.
      </div>
    </div>
  </div>
</div>

Vertically center content

Use verticallyCenterContent to vertically center the content within one column relative to the others.

ReactVanilla

<GridContainer>
  <Row>
    <Column span={6} bgc="promo" verticallyCenterContent>
      <Box bgc="strong">This content is vertically centered.</Box>
    </Column>
    <Column span={6} bgc="promo">
      <Box bgc="strong">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
        auctor mattis magna, sollicitudin feugiat ante faucibus eget. Donec eget
        tincidunt nisi. Curabitur augue dui, condimentum in suscipit non,
        consequat at tellus. Duis massa augue, efficitur nec magna gravida,
        porttitor dapibus sem.
      </Box>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={6} bgc="promo" verticallyCenterContent>
      <Box bgc="strong">This content is vertically centered.</Box>
    </Column>
    <Column span={6} bgc="promo">
      <Box bgc="strong">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
        auctor mattis magna, sollicitudin feugiat ante faucibus eget. Donec eget
        tincidunt nisi. Curabitur augue dui, condimentum in suscipit non,
        consequat at tellus. Duis massa augue, efficitur nec magna gravida,
        porttitor dapibus sem.
      </Box>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-6 swan-col-vertically-center swan-bgc-promo">
      <div class="swan-bgc-strong">This content is vertically centered.</div>
    </div>
    <div class="swan-col-6 swan-bgc-promo">
      <div class="swan-bgc-strong">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
        auctor mattis magna, sollicitudin feugiat ante faucibus eget. Donec eget
        tincidunt nisi. Curabitur augue dui, condimentum in suscipit non,
        consequat at tellus. Duis massa augue, efficitur nec magna gravida,
        porttitor dapibus sem.
      </div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-6 swan-col-vertically-center swan-bgc-promo">
      <div class="swan-bgc-strong">This content is vertically centered.</div>
    </div>
    <div class="swan-col-6 swan-bgc-promo">
      <div class="swan-bgc-strong">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
        auctor mattis magna, sollicitudin feugiat ante faucibus eget. Donec eget
        tincidunt nisi. Curabitur augue dui, condimentum in suscipit non,
        consequat at tellus. Duis massa augue, efficitur nec magna gravida,
        porttitor dapibus sem.
      </div>
    </div>
  </div>
</div>

Floating Container

Use floatingContainer on a child Column with a specified span value, to create a container that sits at the top left of the parent Column. It allows the parent's content to flow and wrap around it.

In the Vanilla API, use the semantically accurate aside tag instead of a div when the content in the floating container (i.e. supporting image, quote) is secondary to the main content.

ReactVanilla

<GridContainer>
  <Row>
    <Column span={12}>
      <Column span={6} bgc="promo" floatingContainer as="aside">
        <Box bgc="strong">Floating container contents, Span 6/12.</Box>
      </Column>
      <p>
        A col-12 with additional text that should start to the right of the
        container, and wrap around the container so that it ends up below the
        container. (Except on Extra-Small screens, where all the text should sit
        below the container.) Here&apos;s some additional text to make this
        paragraph a little longer.
      </p>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={12}>
      <Column span={6} bgc="promo" floatingContainer as="aside">
        <Box bgc="strong">Floating container contents, Span 6/12.</Box>
      </Column>
      <p>
        A col-12 with additional text that should start to the right of the
        container, and wrap around the container so that it ends up below the
        container. (Except on Extra-Small screens, where all the text should sit
        below the container.) Here&apos;s some additional text to make this
        paragraph a little longer.
      </p>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-12">
      <aside class="swan-col-6 swan-floating-container swan-bgc-promo">
        <div class="swan-bgc-strong">
          Floating container contents, Span 6/12.
        </div>
      </aside>
      <p>
        A col-12 with additional text that should start to the right of the
        container, and wrap around the container so that it ends up below the
        container. (Except on Extra-Small screens, where all the text should sit
        below the container.) Here's some additional text to make this paragraph
        a little longer.
      </p>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-12">
      <aside class="swan-col-6 swan-floating-container swan-bgc-promo">
        <div class="swan-bgc-strong">
          Floating container contents, Span 6/12.
        </div>
      </aside>
      <p>
        A col-12 with additional text that should start to the right of the
        container, and wrap around the container so that it ends up below the
        container. (Except on Extra-Small screens, where all the text should sit
        below the container.) Here's some additional text to make this paragraph
        a little longer.
      </p>
    </div>
  </div>
</div>

Use floatingContainerAlignment="right" in addition to floatingContainer to align it to the right.

ReactVanilla

<GridContainer>
  <Row>
    <Column span={12}>
      <Column
        span={4}
        bgc="promo"
        floatingContainer
        floatingContainerAlignment="right"
        as="aside"
      >
        <Box bgc="strong">Floating container contents, Span 4/12.</Box>
      </Column>
      <p>
        This Floating Container is aligned to the right. Here's some additional
        text to make this paragraph a little longer. Here's some additional text
        to make this paragraph a little longer. Here's some additional text to
        make this paragraph a little longer. Here's some additional text to make
        this paragraph a little longer. Here's some additional text to make this
        paragraph a little longer.
      </p>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={12}>
      <Column
        span={4}
        bgc="promo"
        floatingContainer
        floatingContainerAlignment="right"
        as="aside"
      >
        <Box bgc="strong">Floating container contents, Span 4/12.</Box>
      </Column>
      <p>
        This Floating Container is aligned to the right. Here's some additional
        text to make this paragraph a little longer. Here's some additional text
        to make this paragraph a little longer. Here's some additional text to
        make this paragraph a little longer. Here's some additional text to make
        this paragraph a little longer. Here's some additional text to make this
        paragraph a little longer.
      </p>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-12">
      <aside
        class="swan-col-4 swan-floating-container swan-floating-container-right swan-bgc-promo"
      >
        <div class="swan-bgc-strong">
          Floating container contents, Span 4/12.
        </div>
      </aside>
      <p>
        This Floating Container is aligned to the right. Here's some additional
        text to make this paragraph a little longer. Here's some additional text
        to make this paragraph a little longer. Here's some additional text to
        make this paragraph a little longer. Here's some additional text to make
        this paragraph a little longer. Here's some additional text to make this
        paragraph a little longer.
      </p>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-12">
      <aside
        class="swan-col-4 swan-floating-container swan-floating-container-right swan-bgc-promo"
      >
        <div class="swan-bgc-strong">
          Floating container contents, Span 4/12.
        </div>
      </aside>
      <p>
        This Floating Container is aligned to the right. Here's some additional
        text to make this paragraph a little longer. Here's some additional text
        to make this paragraph a little longer. Here's some additional text to
        make this paragraph a little longer. Here's some additional text to make
        this paragraph a little longer. Here's some additional text to make this
        paragraph a little longer.
      </p>
    </div>
  </div>
</div>

Accessibility

Grid as List

In the React API, use as="ul" on the GridContainer and as="li" on the Rows when the grid contents are semantically part of a list.

In the Vanilla API, use ul tag with class="swan-grid-container" and li tag with class="swan-row" instead of div tags.

ReactVanilla

<GridContainer as="ul">
  <Row as="li">
    <Column span={12}>
      <CartItem />
    </Column>
  </Row>
  <Row as="li">
    <Column span={12}>
      <CartItem />
    </Column>
  </Row>
</GridContainer>

<GridContainer as="ul">
  <Row as="li">
    <Column span={12}>
      <CartItem />
    </Column>
  </Row>
  <Row as="li">
    <Column span={12}>
      <CartItem />
    </Column>
  </Row>
</GridContainer>

<ul class="swan-grid-container">
  <li class="swan-row">
    <div class="swan-col-12">
      <div>Cart item 1</div>
    </div>
  </li>
  <li class="swan-row">
    <div class="swan-col-12">
      <div>Cart item 2</div>
    </div>
  </li>
</ul>

<ul class="swan-grid-container">
  <li class="swan-row">
    <div class="swan-col-12">
      <div>Cart item 1</div>
    </div>
  </li>
  <li class="swan-row">
    <div class="swan-col-12">
      <div>Cart item 2</div>
    </div>
  </li>
</ul>

Nested Grid

Place a GridContainer or a Row within a Column to create more flexible layouts. Both the nested row and its parent are divided into 12 columns; the nested row will have narrower columns. Make sure that every Column is a direct child of a Row, and every Row is a direct child of either a GridContainer or a Column.

ReactVanilla

<GridContainer>
  <Row>
    <Column span={6} bgc="green-100">
      <Box bgc="grey-300">
        Content, Span 6/12
        <Row>
          <Column span={3}>
            <Box bgc="grey-400">Nested content, Span 3/12</Box>
          </Column>
          <Column span={3}>
            <Box bgc="grey-400">Nested content, Span 3/12</Box>
          </Column>
          <Column span={3}>
            <Box bgc="grey-400">Nested content, Span 3/12</Box>
          </Column>
          <Column span={3}>
            <Box bgc="grey-400">Nested content, Span 3/12</Box>
          </Column>
        </Row>
      </Box>
    </Column>
    <Column span={6} bgc="green-100">
      <Box bgc="grey-300">
        Content, Span 6/12
        <Row>
          <Column span={3}>
            <Box bgc="grey-400">Nested content, Span 3/12</Box>
          </Column>
          <Column span={3}>
            <Box bgc="grey-400">Nested content, Span 3/12</Box>
          </Column>
          <Column span={3}>
            <Box bgc="grey-400">Nested content, Span 3/12</Box>
          </Column>
          <Column span={3}>
            <Box bgc="grey-400">Nested content, Span 3/12</Box>
          </Column>
        </Row>
      </Box>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={6} bgc="green-100">
      <Box bgc="grey-300">
        Content, Span 6/12
        <Row>
          <Column span={3}>
            <Box bgc="grey-400">Nested content, Span 3/12</Box>
          </Column>
          <Column span={3}>
            <Box bgc="grey-400">Nested content, Span 3/12</Box>
          </Column>
          <Column span={3}>
            <Box bgc="grey-400">Nested content, Span 3/12</Box>
          </Column>
          <Column span={3}>
            <Box bgc="grey-400">Nested content, Span 3/12</Box>
          </Column>
        </Row>
      </Box>
    </Column>
    <Column span={6} bgc="green-100">
      <Box bgc="grey-300">
        Content, Span 6/12
        <Row>
          <Column span={3}>
            <Box bgc="grey-400">Nested content, Span 3/12</Box>
          </Column>
          <Column span={3}>
            <Box bgc="grey-400">Nested content, Span 3/12</Box>
          </Column>
          <Column span={3}>
            <Box bgc="grey-400">Nested content, Span 3/12</Box>
          </Column>
          <Column span={3}>
            <Box bgc="grey-400">Nested content, Span 3/12</Box>
          </Column>
        </Row>
      </Box>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-6 swan-bgc-green-100">
      <div class="swan-bgc-grey-300">
        Content, Span 6/12
        <div class="swan-row">
          <div class="swan-col-3">
            <div class="swan-bgc-grey-400">Nested content, Span 3/12</div>
          </div>
          <div class="swan-col-3">
            <div class="swan-bgc-grey-400">Nested content, Span 3/12</div>
          </div>
          <div class="swan-col-3">
            <div class="swan-bgc-grey-400">Nested content, Span 3/12</div>
          </div>
          <div class="swan-col-3">
            <div class="swan-bgc-grey-400">Nested content, Span 3/12</div>
          </div>
        </div>
      </div>
    </div>
    <div class="swan-col-6 swan-bgc-green-100">
      <div class="swan-bgc-grey-300">
        Content, Span 6/12
        <div class="swan-row">
          <div class="swan-col-3">
            <div class="swan-bgc-grey-400">Nested content, Span 3/12</div>
          </div>
          <div class="swan-col-3">
            <div class="swan-bgc-grey-400">Nested content, Span 3/12</div>
          </div>
          <div class="swan-col-3">
            <div class="swan-bgc-grey-400">Nested content, Span 3/12</div>
          </div>
          <div class="swan-col-3">
            <div class="swan-bgc-grey-400">Nested content, Span 3/12</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-6 swan-bgc-green-100">
      <div class="swan-bgc-grey-300">
        Content, Span 6/12
        <div class="swan-row">
          <div class="swan-col-3">
            <div class="swan-bgc-grey-400">Nested content, Span 3/12</div>
          </div>
          <div class="swan-col-3">
            <div class="swan-bgc-grey-400">Nested content, Span 3/12</div>
          </div>
          <div class="swan-col-3">
            <div class="swan-bgc-grey-400">Nested content, Span 3/12</div>
          </div>
          <div class="swan-col-3">
            <div class="swan-bgc-grey-400">Nested content, Span 3/12</div>
          </div>
        </div>
      </div>
    </div>
    <div class="swan-col-6 swan-bgc-green-100">
      <div class="swan-bgc-grey-300">
        Content, Span 6/12
        <div class="swan-row">
          <div class="swan-col-3">
            <div class="swan-bgc-grey-400">Nested content, Span 3/12</div>
          </div>
          <div class="swan-col-3">
            <div class="swan-bgc-grey-400">Nested content, Span 3/12</div>
          </div>
          <div class="swan-col-3">
            <div class="swan-bgc-grey-400">Nested content, Span 3/12</div>
          </div>
          <div class="swan-col-3">
            <div class="swan-bgc-grey-400">Nested content, Span 3/12</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Small and Extra-Small screens

By default, the Grid spans full width, forming a vertical stack of 12 columns. This can be overridden by dividing the row into sections of 3, 6, or 9 columns only, allowing for customized layout configurations.

At handoff, ensure to define the layout for each specific breakpoint.

Best practices

Do

Use a wrapper element such as Box inside a Column to add custom styling to its child elements.

Don't

Apply Spacing, margin, padding, widths, or any layout-oriented styling onto grid elements, such as GridContainer, Row, or Column.

Do

Use offset when the layout calls for a more playful and exploratory experience.

Don't

Adjust the widths of columns, margins, and gutters.

Do

Use components as intended for layout.

Don't

Scale or stretch components to fit the grid.

Do

Use bgc or backgroundColor to set the background color of any grid element, such as GridContainer, Row, and/or Column.

Don't

Combine grid elements with other components, by putting a grid CSS class and another component's CSS class on the same HTML element.

Do

Use a single Row element to wrap a repeating series of uniform content, such as a series of tiles. This will provide better responsive design, since each Row creates a line break, and these breaks may be unwanted on certain screen sizes. Using a single Row element will avoid these awkward line breaks in the middle of the series.

Don't

Use a Grid in narrow panels like Modal Dialogs, unless you need to divide your content up into horizontal sections.

Props

GridContainer

This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

prop	type	required	description	default
dividers	`boolean \| null`	false	Decide whether or not to include dividers between each Column.	false
gutter	`"standard" \| "tight" \| null`	false	Specify the gutter width Available options: 'standard', 'tight'	standard

Row

See core props for additional props that can be applied to this component.

prop	type	required	description	default
sticky	`boolean \| null`	false	Decide whether or not to allow sticky Column.	false

Column

See core props for additional props that can be applied to this component.

prop	type	required	description	default
span	`NonNullable<1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12>`	true	The number of columns that this Column should occupy	null
offset	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| null`	false	The default number of columns that this column should be shifted to the right	null
sticky	`boolean \| null`	false	Whether or not the Column's content should be sticky	false
push	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| null`	false	Change the column order by pushing it to the right by a specified number of columns.	null
spanXs	`1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| null`	false	The number of columns that this Column should occupy on extra-small screens	null
spanSm	`1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| null`	false	The number of columns that this Column should occupy on small screens	null
spanMd	`1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| null`	false	The number of columns that this Column should occupy on medium screens	null
spanLg	`1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| null`	false	The number of columns that this Column should occupy on large screens	null
spanXl	`1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| null`	false	The number of columns that this Column should occupy on X-large screens	null
offsetSm	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| null`	false	The number of columns that this column should be shifted to the right on small screens	null
offsetMd	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| null`	false	The number of columns that this column should be shifted to the right on medium screens	null
offsetLg	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| null`	false	The number of columns that this column should be shifted to the right on large screens	null
offsetXl	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| null`	false	The number of columns that this column should be shifted to the right on X-large screens	null
pushSm	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| null`	false	Change the column order on small screens by pushing it to the right by a specified number of columns.	null
pushMd	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| null`	false	Change the column order on medium screens by pushing it to the right by a specified number of columns.	null
pushLg	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| null`	false	Change the column order on large screens by pushing it to the right by a specified number of columns.	null
pushXl	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| null`	false	Change the column order on X-large screens by pushing it to the right by a specified number of columns.	null
pull	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| null`	false	Change the column order by pulling it to the left by a specified number of columns.	null
pullSm	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| null`	false	Change the column order on small screens by pulling it to the left by a specified number of columns.	null
pullMd	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| null`	false	Change the column order on medium screens by pulling it to the left by a specified number of columns.	null
pullLg	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| null`	false	Change the column order on large screens by pulling it to the left by a specified number of columns.	null
pullXl	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| null`	false	Change the column order on X-large screens by pulling it to the left by a specified number of columns.	null
flexColumn	`boolean \| null`	false	In a lineWrap GridContainer, decide whether to arrange the Column's children as a single column, evenly spaced between the top and bottom.	false
verticallyCenterContent	`boolean \| null`	false	Whether or not the Column's content should be vertically centered within the Row	false
unsticky	`"none" \| "xs" \| null`	false	If a Column is normally sticky, which screen sizes the Column should NOT be sticky on Available options: "none", "xs"	none
floatingContainer	`boolean \| null`	false	Whether the Column is a Floating Container	false
floatingContainerAlignment	`"left" \| "right" \| null`	false	Alignment for floating Container	left

Was this page useful?

Published: Aug 11, 2022Last updated: Sep 18, 2024

Form

Heading (H1–H6)

Grid

Use Grid...

Don't use Grid...

Structure

Grid Container

Divider

Tight gutter

Row

Overflow

Sticky

Column

Span

Offset

Push / Pull

Sticky

Flex column

Vertically center content

Floating Container

Accessibility

Grid as List

Nested Grid

Small and Extra-Small screens

Best practices

Do

Don't

Do

Don't

Do

Don't

Do

Don't

Do

Don't

Props

Related