Grid

Provides a structured layout framework for page content, ensuring consistent alignment, spacing, and responsiveness across components and screens.

styleKeys: grid

UsageAPI

Use Grid...

Inside Bounded Content to create page layouts.

Don't use Grid...

Inside Carousel or Modal Dialog, as it's not supported.
For form fields. Use Form.

Overview

See Page Layout for guidance on using Grid with other layout components.

Structure

Grid is based on an invisible 12-segment structure, where each segment has a fluid width. As the grid resizes, segments scale proportionally.

To structure layouts, Grid consists of three components that must be used in order: GridContainer > Row > Column. Nested layouts can be created by placing a GridContainer inside a Column.

ReactVanilla

<GridContainer>
  <Row>
    <Column span={6}>
      <Box className="docs-example-column">Column</Box>
    </Column>
    <Column span={6}>
      <Box className="docs-example-column">Column</Box>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={6}>
      <Box className="docs-example-column">Column</Box>
    </Column>
    <Column span={6}>
      <Box className="docs-example-column">Column</Box>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-6">
      <div class="docs-example-column">Column</div>
    </div>
    <div class="swan-col-6">
      <div class="docs-example-column">Column</div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-6">
      <div class="docs-example-column">Column</div>
    </div>
    <div class="swan-col-6">
      <div class="docs-example-column">Column</div>
    </div>
  </div>
</div>

Segment vs Column

Segments define the layout structure, acting as invisible guides for alignment and spacing.
Column is a flexible wrapper component that can span multiple segments, holding content and adapting responsively.

Segments create the structure, while the Column component controls how content is placed within that structure.

Spanning and wrapping

Columns can span 1 to 12 Grid Segments. If a Row does not contain enough Grid Segments, Columns will wrap within a row.

Columns without a set span will span 1 Segment. On xs breakpoints, all columns span 12 Segments, unless explicitly overridden with spanXs. Push, pull, and offset has no effect on xs breakpoints.

ReactVanilla

<GridContainer>
  <Row className="docs-example-row">
    <Column span={4}>
      <Box className="docs-example-column">Span 4</Box>
    </Column>
    <Column span={6}>
      <Box className="docs-example-column">Span 6</Box>
    </Column>
    <Column span={5}>
      <Box className="docs-example-column">Span 5 (wrapped)</Box>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row className="docs-example-row">
    <Column span={4}>
      <Box className="docs-example-column">Span 4</Box>
    </Column>
    <Column span={6}>
      <Box className="docs-example-column">Span 6</Box>
    </Column>
    <Column span={5}>
      <Box className="docs-example-column">Span 5 (wrapped)</Box>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="docs-example-row swan-row">
    <div class="swan-col-4">
      <div class="docs-example-column">Span 4</div>
    </div>
    <div class="swan-col-6">
      <div class="docs-example-column">Span 6</div>
    </div>
    <div class="swan-col-5">
      <div class="docs-example-column">Span 5 (wrapped)</div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="docs-example-row swan-row">
    <div class="swan-col-4">
      <div class="docs-example-column">Span 4</div>
    </div>
    <div class="swan-col-6">
      <div class="docs-example-column">Span 6</div>
    </div>
    <div class="swan-col-5">
      <div class="docs-example-column">Span 5 (wrapped)</div>
    </div>
  </div>
</div>

Grid Container

Use GridContainer to stack Rows vertically. Place the top level Grid Container inside Bounded Content for page layouts.

ReactVanilla

<GridContainer>
  <Row className="docs-example-row">
    <Column span={12}>
      <Box py={5}>Row</Box>
    </Column>
  </Row>
  <Row className="docs-example-row">
    <Column span={12}>
      <Box py={5}>Row</Box>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row className="docs-example-row">
    <Column span={12}>
      <Box py={5}>Row</Box>
    </Column>
  </Row>
  <Row className="docs-example-row">
    <Column span={12}>
      <Box py={5}>Row</Box>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="docs-example-row swan-row">
    <div class="swan-col-12">
      <div class="swan-py-5">Row</div>
    </div>
  </div>
  <div class="docs-example-row swan-row">
    <div class="swan-col-12">
      <div class="swan-py-5">Row</div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="docs-example-row swan-row">
    <div class="swan-col-12">
      <div class="swan-py-5">Row</div>
    </div>
  </div>
  <div class="docs-example-row swan-row">
    <div class="swan-col-12">
      <div class="swan-py-5">Row</div>
    </div>
  </div>
</div>

Nested Grid

GridContainer can be placed inside Column to create a nested Grid. Nested Grids do not contain the same outer padding as top-level Grids, allowing for alignment between the two.

ReactVanilla

<GridContainer>
  <Row className="docs-example-row">
    <Column span={4}>
      <Box className="docs-example-column">Column</Box>
    </Column>
    <Column span={8}>
      <GridContainer>
        {/* Nested Grid */}
        <Row className="docs-example-row">
          <Column span={6}>
            <Box className="docs-example-column">Column</Box>
          </Column>
          <Column span={6}>
            <Box className="docs-example-column">Column</Box>
          </Column>
        </Row>
      </GridContainer>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row className="docs-example-row">
    <Column span={4}>
      <Box className="docs-example-column">Column</Box>
    </Column>
    <Column span={8}>
      <GridContainer>
        {/* Nested Grid */}
        <Row className="docs-example-row">
          <Column span={6}>
            <Box className="docs-example-column">Column</Box>
          </Column>
          <Column span={6}>
            <Box className="docs-example-column">Column</Box>
          </Column>
        </Row>
      </GridContainer>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="docs-example-row swan-row">
    <div class="swan-col-4">
      <div class="docs-example-column">Column</div>
    </div>
    <div class="swan-col-8">
      <div class="swan-grid-container">
        <div class="docs-example-row swan-row">
          <div class="swan-col-6">
            <div class="docs-example-column">Column</div>
          </div>
          <div class="swan-col-6">
            <div class="docs-example-column">Column</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="docs-example-row swan-row">
    <div class="swan-col-4">
      <div class="docs-example-column">Column</div>
    </div>
    <div class="swan-col-8">
      <div class="swan-grid-container">
        <div class="docs-example-row swan-row">
          <div class="swan-col-6">
            <div class="docs-example-column">Column</div>
          </div>
          <div class="swan-col-6">
            <div class="docs-example-column">Column</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Dividers

Use dividers to add vertical lines between each Column.

ReactVanilla

<GridContainer dividers>
  <Row>
    <Column span={4}>
      <Box className="docs-example-column">Column</Box>
    </Column>
    <Column span={4}>
      <Box className="docs-example-column">Column</Box>
    </Column>
    <Column span={4}>
      <Box className="docs-example-column">Column</Box>
    </Column>
  </Row>
</GridContainer>

<GridContainer dividers>
  <Row>
    <Column span={4}>
      <Box className="docs-example-column">Column</Box>
    </Column>
    <Column span={4}>
      <Box className="docs-example-column">Column</Box>
    </Column>
    <Column span={4}>
      <Box className="docs-example-column">Column</Box>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container swan-grid-dividers">
  <div class="swan-row">
    <div class="swan-col-4">
      <div class="docs-example-column">Column</div>
    </div>
    <div class="swan-col-4">
      <div class="docs-example-column">Column</div>
    </div>
    <div class="swan-col-4">
      <div class="docs-example-column">Column</div>
    </div>
  </div>
</div>

<div class="swan-grid-container swan-grid-dividers">
  <div class="swan-row">
    <div class="swan-col-4">
      <div class="docs-example-column">Column</div>
    </div>
    <div class="swan-col-4">
      <div class="docs-example-column">Column</div>
    </div>
    <div class="swan-col-4">
      <div class="docs-example-column">Column</div>
    </div>
  </div>
</div>

Tight Gutter

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

ReactVanilla

<GridContainer gutter="tight">
  <Row>
    <Column span={4}>
      <Box className="docs-example-column">Column</Box>
    </Column>
    <Column span={4}>
      <Box className="docs-example-column">Column</Box>
    </Column>
    <Column span={4}>
      <Box className="docs-example-column">Column</Box>
    </Column>
  </Row>
</GridContainer>

<GridContainer gutter="tight">
  <Row>
    <Column span={4}>
      <Box className="docs-example-column">Column</Box>
    </Column>
    <Column span={4}>
      <Box className="docs-example-column">Column</Box>
    </Column>
    <Column span={4}>
      <Box className="docs-example-column">Column</Box>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container swan-grid-container-tight">
  <div class="swan-row">
    <div class="swan-col-4">
      <div class="docs-example-column">Column</div>
    </div>
    <div class="swan-col-4">
      <div class="docs-example-column">Column</div>
    </div>
    <div class="swan-col-4">
      <div class="docs-example-column">Column</div>
    </div>
  </div>
</div>

<div class="swan-grid-container swan-grid-container-tight">
  <div class="swan-row">
    <div class="swan-col-4">
      <div class="docs-example-column">Column</div>
    </div>
    <div class="swan-col-4">
      <div class="docs-example-column">Column</div>
    </div>
    <div class="swan-col-4">
      <div class="docs-example-column">Column</div>
    </div>
  </div>
</div>

Row

Use Row to group Columns horizontally inside GridContainer.

Vertical Gap

Grid does not provide any vertical spacing when columns wrap within a row. Use verticalGap to adjust this spacing as needed. verticalGap=”matchGutter” can be used to match the horizontal gutter.

Sticky

Use sticky on Row when a Column inside uses Sticky. Note that this will prevent columns from stretching to the same height.

Column

Use Column inside Row to define flexible, responsive grid sections. Columns have padding inside that will align content to the grid segments.

Span

Use span={*} to extend columns across multiple Grid Segments.

ReactVanilla

<GridContainer>
  <Row>
    <Column span={4}>
      <Box className="docs-example-column">Span 4</Box>
    </Column>
    <Column span={8}>
      <Box className="docs-example-column">Span 8</Box>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={4}>
      <Box className="docs-example-column">Span 4</Box>
    </Column>
    <Column span={8}>
      <Box className="docs-example-column">Span 8</Box>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-4">
      <div class="docs-example-column">Span 4</div>
    </div>
    <div class="swan-col-8">
      <div class="docs-example-column">Span 8</div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-4">
      <div class="docs-example-column">Span 4</div>
    </div>
    <div class="swan-col-8">
      <div class="docs-example-column">Span 8</div>
    </div>
  </div>
</div>

Offset

Use offset={*} to create horizontal spacing between columns. This is useful when adjusting spacing across different breakpoints. See responsive for more details.

ReactVanilla

<GridContainer>
  <Row>
    <Column span={3}>
      <Box className="docs-example-column">Column</Box>
    </Column>
    <Column span={7} offset={2} spanSm={9} offsetSm={0}>
      <Box className="docs-example-column">
        Column (offset 2). No offset on sm breakpoint
      </Box>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={3}>
      <Box className="docs-example-column">Column</Box>
    </Column>
    <Column span={7} offset={2} spanSm={9} offsetSm={0}>
      <Box className="docs-example-column">
        Column (offset 2). No offset on sm breakpoint
      </Box>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-3">
      <div class="docs-example-column">Column</div>
    </div>
    <div
      class="swan-col-7 swan-col-sm-9 swan-col-offset-2 swan-col-sm-offset-0"
    >
      <div class="docs-example-column">
        Column (offset 2). No offset on sm breakpoint
      </div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-3">
      <div class="docs-example-column">Column</div>
    </div>
    <div
      class="swan-col-7 swan-col-sm-9 swan-col-offset-2 swan-col-sm-offset-0"
    >
      <div class="docs-example-column">
        Column (offset 2). No offset on sm breakpoint
      </div>
    </div>
  </div>
</div>

Push and Pull

Use push={*} and pull={*} to reorder columns. Push moves columns to the right, while pull moves them to the left. This is useful for arranging content differently in the DOM than it appears visually, or for reordering content at different breakpoints. See responsive for more details.

ReactVanilla

<GridContainer>
  <Row>
    <Column span={6} spanXs={12} pushMd={6} pushLg={6} pushXl={6}>
      <Box className="docs-example-column">First Column</Box>
    </Column>
    <Column span={6} spanXs={12} pullMd={6} pullLg={6} pullXl={6}>
      <Box className="docs-example-column">Second Column</Box>
    </Column>
  </Row>
  <Row>
    <Column span={12}>
      <Box>
        Column order is rearranged on <code>md</code> and above
      </Box>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={6} spanXs={12} pushMd={6} pushLg={6} pushXl={6}>
      <Box className="docs-example-column">First Column</Box>
    </Column>
    <Column span={6} spanXs={12} pullMd={6} pullLg={6} pullXl={6}>
      <Box className="docs-example-column">Second Column</Box>
    </Column>
  </Row>
  <Row>
    <Column span={12}>
      <Box>
        Column order is rearranged on <code>md</code> and above
      </Box>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-3">
      <div class="docs-example-column">Column</div>
    </div>
    <div
      class="swan-col-7 swan-col-sm-9 swan-col-offset-2 swan-col-sm-offset-0"
    >
      <div class="docs-example-column">
        Column (offset 2). No offset on sm breakpoint
      </div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-3">
      <div class="docs-example-column">Column</div>
    </div>
    <div
      class="swan-col-7 swan-col-sm-9 swan-col-offset-2 swan-col-sm-offset-0"
    >
      <div class="docs-example-column">
        Column (offset 2). No offset on sm breakpoint
      </div>
    </div>
  </div>
</div>

Sticky

Use sticky on the column and parent row to keep a Column on screen while its Row is visible during scrolling.

ReactVanilla

<GridContainer>
  <Row sticky>
    <Column span={6} sticky unsticky="xs">
      <Box className="docs-example-column">Sticky column</Box>
    </Column>
    <Column span={6}>
      <Box
        className="docs-example-column"
        style={{
          'min-height': '900px',
        }}
      >
        Column
      </Box>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row sticky>
    <Column span={6} sticky unsticky="xs">
      <Box className="docs-example-column">Sticky column</Box>
    </Column>
    <Column span={6}>
      <Box
        className="docs-example-column"
        style={{
          'min-height': '900px',
        }}
      >
        Column
      </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">
      <div class="docs-example-column">Sticky column</div>
    </div>
    <div class="swan-col-6">
      <div style="min-height: 900px;" class="docs-example-column">Column</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">
      <div class="docs-example-column">Sticky column</div>
    </div>
    <div class="swan-col-6">
      <div style="min-height: 900px;" class="docs-example-column">Column</div>
    </div>
  </div>
</div>

Flex Column

Use flexColumn to evenly distribute the column content vertically.

ReactVanilla

<GridContainer>
  <Row>
    <Column span={6} flexColumn>
      <Box className="docs-example-column">Flex Column</Box>
      <Box className="docs-example-column">Flex Column</Box>
      <Box className="docs-example-column">Flex Column</Box>
    </Column>
    <Column span={6}>
      <Box className="docs-example-column" style={{ 'min-height': '300px' }}>
        Column
      </Box>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={6} flexColumn>
      <Box className="docs-example-column">Flex Column</Box>
      <Box className="docs-example-column">Flex Column</Box>
      <Box className="docs-example-column">Flex Column</Box>
    </Column>
    <Column span={6}>
      <Box className="docs-example-column" style={{ 'min-height': '300px' }}>
        Column
      </Box>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-6 swan-col-flex-column">
      <div class="docs-example-column">Flex Column</div>
      <div class="docs-example-column">Flex Column</div>
      <div class="docs-example-column">Flex Column</div>
    </div>
    <div class="swan-col-6">
      <div style="min-height: 300px;" class="docs-example-column">Column</div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-6 swan-col-flex-column">
      <div class="docs-example-column">Flex Column</div>
      <div class="docs-example-column">Flex Column</div>
      <div class="docs-example-column">Flex Column</div>
    </div>
    <div class="swan-col-6">
      <div style="min-height: 300px;" class="docs-example-column">Column</div>
    </div>
  </div>
</div>

Vertically Center Content

Use verticallyCenterContent to vertically center the content.

ReactVanilla

<GridContainer>
  <Row>
    <Column span={6} verticallyCenterContent>
      <Box className="docs-example-column">Vertically centered</Box>
    </Column>
    <Column span={6}>
      <Box
        className="docs-example-column"
        style={{
          'min-height': '150px',
        }}
      >
        Column
      </Box>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={6} verticallyCenterContent>
      <Box className="docs-example-column">Vertically centered</Box>
    </Column>
    <Column span={6}>
      <Box
        className="docs-example-column"
        style={{
          'min-height': '150px',
        }}
      >
        Column
      </Box>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-6 swan-col-vertically-center">
      <div class="docs-example-column">Vertically centered</div>
    </div>
    <div class="swan-col-6">
      <div style="min-height: 150px;" class="docs-example-column">Column</div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-6 swan-col-vertically-center">
      <div class="docs-example-column">Vertically centered</div>
    </div>
    <div class="swan-col-6">
      <div style="min-height: 150px;" class="docs-example-column">Column</div>
    </div>
  </div>
</div>

Floating Container

Use floatingContainer on a child Column with a span value to position it at the top left of the parent Column, allowing content to flow around it.

ReactVanilla

<GridContainer>
  <Row>
    <Column span={12}>
      <Box className="docs-example-column">
        Column
        <Column span={6} floatingContainer as="aside">
          <Box className="docs-example-column">Floating Container</Box>
        </Column>
      </Box>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={12}>
      <Box className="docs-example-column">
        Column
        <Column span={6} floatingContainer as="aside">
          <Box className="docs-example-column">Floating Container</Box>
        </Column>
      </Box>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-12">
      <div class="docs-example-column">
        Column
        <aside class="swan-col-6 swan-floating-container">
          <div class="docs-example-column">Floating Container</div>
        </aside>
      </div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-12">
      <div class="docs-example-column">
        Column
        <aside class="swan-col-6 swan-floating-container">
          <div class="docs-example-column">Floating Container</div>
        </aside>
      </div>
    </div>
  </div>
</div>

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

ReactVanilla

<GridContainer>
  <Row>
    <Column span={12}>
      <Box className="docs-example-column">
        Column
        <Column
          span={6}
          floatingContainer
          floatingContainerAlignment="right"
          as="aside"
        >
          <Box className="docs-example-column">Floating Container</Box>
        </Column>
      </Box>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={12}>
      <Box className="docs-example-column">
        Column
        <Column
          span={6}
          floatingContainer
          floatingContainerAlignment="right"
          as="aside"
        >
          <Box className="docs-example-column">Floating Container</Box>
        </Column>
      </Box>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-12">
      <div class="docs-example-column">
        Column
        <aside
          class="swan-col-6 swan-floating-container swan-floating-container-right"
        >
          <div class="docs-example-column">Floating Container</div>
        </aside>
      </div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-12">
      <div class="docs-example-column">
        Column
        <aside
          class="swan-col-6 swan-floating-container swan-floating-container-right"
        >
          <div class="docs-example-column">Floating Container</div>
        </aside>
      </div>
    </div>
  </div>
</div>

Responsive

Use breakpoint-specific overrides to adjust column properties at certain breakpoints. These overrides do not cascade to other breakpoints. Replace X with the appropriate breakpoint, e.g. spanSm.

Span – Use spanX={*} for breakpoint-specific overrides.
Offset – Use offsetX={*} for breakpoint-specific overrides.
Push and Pull – Use pushX={*} and pullX={*} for breakpoint-specific overrides.
Sticky – Use unsticky="xs" on the column to override sticky on [xs] breakpoints.

Vanilla

In the Vanilla API:

Span – use swan-col-* (0-12). Use swan-col-X-* for breakpoint-specific overrides.
Offset – use swan-col-offset-* (0-12) with swan-col-*. Use swan-col-X-offset-* for breakpoint-specific overrides.
Push and Pull – use swan-col-push-* and swan-col-pull-*. Use swan-col-X-push-* and swan-col-X-pull-* for breakpoint-specific overrides.
Sticky – use swan-col-push-* and swan-col-pull-*. Use swan-col-X-push-* and swan-col-X-pull-* for breakpoint-specific overrides.
Flex Column – use swan-col-flex-column.
Vertically Center Content – use swan-col-vertically-center.
Floating Container – use <aside> instead of <div> when the floating content (e.g., an image or quote) is secondary to the main content.

Accessibility

Grid as a List

In the React API, use as="ul" on GridContainer and as="li" on Rows for list-based content.
In the Vanilla API, use <ul class="swan-grid-container"> and <li class="swan-row"> instead of <div>.

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>

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

Grid

Use Grid...

Don't use Grid...

Overview

Structure

Segment vs Column

Spanning and wrapping

Grid Container

Nested Grid

Dividers

Tight Gutter

Row

Vertical Gap

Sticky

Column

Span

Offset

Push and Pull

Sticky

Flex Column

Vertically Center Content

Floating Container

Responsive

Vanilla

Accessibility

Grid as a List

Props

Related