Skip to content
Home

GridItem

Info
Demos
Properties

Description

Layout.GridItem is a building block for CSS grid based layout of contents and components. Should be used in combination with GridContainer.

The columns do change based on what breakpoint the browser is in:

  • 4 columns when small
  • 6 columns when medium
  • 12 columns when large

Span

You need to provide a span prop with a number from 1 to 12 (can be changed in GridContainer with the columns property).

The span will be used to specify where the item is placed in the grid columns.

A span needs always two numbers – from and to.

uses 50% in width
uses 50% in width
Code Editor
<Layout.GridContainer>
  <Layout.GridItem span={[1, 6]}>uses 50% in width</Layout.GridItem>
  <Layout.GridItem span={[7, 12]}>uses 50% in width</Layout.GridItem>
</Layout.GridContainer>

Example of spans:

  • span={[1, 'end']}
  • span={{ small: [1, 4], medium: [1, 6], large: [1, 12]}}

Responsive spans

You can also make spans respond to media queries.

For doing so, provide a span prop with an object containing Media Query types. Each media size should contain a span, like mentioned above.

uses 50% or 100% based on the screen size
uses 50% or 100% based on the screen size
Code Editor
<Layout.GridContainer>
  <Layout.GridItem
    span={{
      small: [1, 12],
      large: [1, 6],
    }}
  >
    uses 50% or 100% based on the screen size
  </Layout.GridItem>
  <Layout.GridItem
    span={{
      small: [1, 12],
      large: [7, 12],
    }}
  >
    uses 50% or 100% based on the screen size
  </Layout.GridItem>
</Layout.GridContainer>

Demo

Responsive span usage

Item A
Item B
Item C
Item D
Code Editor
<Layout.GridContainer rowGap columnGap>
  <Layout.GridItem
    span={{
      small: [1, 2],
      medium: [1, 3],
      large: [1, 12],
    }}
    style={colors[0]}
    element={TestElement}
  >
    Item A
  </Layout.GridItem>

  <Layout.GridItem
    span={{
      small: [3, 4],
      medium: [4, 6],
      large: [1, 4],
    }}
    style={colors[1]}
    element={TestElement}
  >
    Item B
  </Layout.GridItem>

  <Layout.GridItem
    span={{
      small: [2, 3],
      medium: [4, 6],
      large: [5, 8],
    }}
    style={colors[2]}
    element={TestElement}
  >
    Item C
  </Layout.GridItem>

  <Layout.GridItem
    span={{
      small: [1, 4],
      medium: [4, 6],
      large: [9, 12],
    }}
    style={colors[3]}
    element={TestElement}
  >
    Item D
  </Layout.GridItem>
</Layout.GridContainer>

Tab order horizontal

In this example, the order changes, so does the tab (key) order.

Code Editor
<Layout.GridContainer rowGap columnGap columns={12}>
  <Layout.GridItem span={[1, 6]}>
    <Item>Left top</Item>
  </Layout.GridItem>
  <Layout.GridItem span={[7, 12]}>
    <Item>Right top</Item>
  </Layout.GridItem>
  <Layout.GridItem span={[1, 6]}>
    <Item>Left bottom</Item>
  </Layout.GridItem>
  <Layout.GridItem span={[7, 12]}>
    <Item>Right bottom</Item>
  </Layout.GridItem>
</Layout.GridContainer>

Tab order vertical

In this example, the order changes, so does the tab (key) order.

Code Editor
<Layout.GridContainer rowGap columnGap columns={12}>
  <Layout.GridItem span={[1, 6]}>
    <Item>Left top</Item>
  </Layout.GridItem>
  <Layout.GridItem span={[1, 6]}>
    <Item>Left bottom</Item>
  </Layout.GridItem>
  <Layout.GridItem span={[7, 12]}>
    <Item>Right top</Item>
  </Layout.GridItem>
  <Layout.GridItem span={[7, 12]}>
    <Item>Right bottom</Item>
  </Layout.GridItem>
</Layout.GridContainer>