Grid

The Grid component implements a layout that arranges child components in a grid.

Example

Live Editor

<Grid rows={2} columns={3} rowGap='10px' columnGap='10px'> <BorderBox>Item1</BorderBox> <BorderBox>Item2</BorderBox> <BorderBox>Item3</BorderBox> <BorderBox>Item4</BorderBox> <BorderBox>Item5</BorderBox> <BorderBox>Item6</BorderBox> </Grid>

<Grid rows={2} columns={3} rowGap='10px' columnGap='10px'>
  <BorderBox>Item1</BorderBox>
  <BorderBox>Item2</BorderBox>
  <BorderBox>Item3</BorderBox>
  <BorderBox>Item4</BorderBox>
  <BorderBox>Item5</BorderBox>
  <BorderBox>Item6</BorderBox>
</Grid>

Result

Loading...

Grid Template

The default value of row/columnTrackList is 1fr.

• grid-template-rows: repeat(rows, rowTrackList)

• grid-template-columns: repeat(columns, columnTrackList)

Live Editor

<Grid rows={2} columns={2} columnTrackList='150px 200px' rowTrackList='80px' rowGap='10px' columnGap='10px' > <BorderBox>Item1</BorderBox> <BorderBox>Item2</BorderBox> <BorderBox>Item3</BorderBox> <BorderBox>Item4</BorderBox> <BorderBox>Item5</BorderBox> <BorderBox>Item6</BorderBox> <BorderBox>Item7</BorderBox> <BorderBox>Item8</BorderBox> </Grid>

<Grid
  rows={2}
  columns={2}
  columnTrackList='150px 200px'
  rowTrackList='80px'
  rowGap='10px'
  columnGap='10px'
>
  <BorderBox>Item1</BorderBox>
  <BorderBox>Item2</BorderBox>
  <BorderBox>Item3</BorderBox>
  <BorderBox>Item4</BorderBox>
  <BorderBox>Item5</BorderBox>
  <BorderBox>Item6</BorderBox>
  <BorderBox>Item7</BorderBox>
  <BorderBox>Item8</BorderBox>
</Grid>

Result

Loading...

Gap

You can set the gap for rows and columns respectively.

Live Editor

<Grid rows={2} columns={3} rowGap='20px' columnGap='10px'> <BorderBox>Item1</BorderBox> <BorderBox>Item2</BorderBox> <BorderBox>Item3</BorderBox> <BorderBox>Item4</BorderBox> <BorderBox>Item5</BorderBox> <BorderBox>Item6</BorderBox> </Grid>

<Grid rows={2} columns={3} rowGap='20px' columnGap='10px'>
  <BorderBox>Item1</BorderBox>
  <BorderBox>Item2</BorderBox>
  <BorderBox>Item3</BorderBox>
  <BorderBox>Item4</BorderBox>
  <BorderBox>Item5</BorderBox>
  <BorderBox>Item6</BorderBox>
</Grid>

Result

Loading...

Responsive Column

You can set the responsive Column of Grid.

*only Column possible

Live Editor

<Grid columns={{ xs: 1, sm: 2, md: 3, lg: 4, xl: 6 }} columnGap='20px' rowGap='20px' > <BorderBox>Item1</BorderBox> <BorderBox>Item2</BorderBox> <BorderBox>Item3</BorderBox> <BorderBox>Item4</BorderBox> <BorderBox>Item5</BorderBox> <BorderBox>Item6</BorderBox> </Grid>

<Grid
  columns={{ xs: 1, sm: 2, md: 3, lg: 4, xl: 6 }}
  columnGap='20px'
  rowGap='20px'
>
  <BorderBox>Item1</BorderBox>
  <BorderBox>Item2</BorderBox>
  <BorderBox>Item3</BorderBox>
  <BorderBox>Item4</BorderBox>
  <BorderBox>Item5</BorderBox>
  <BorderBox>Item6</BorderBox>
</Grid>

Result

Loading...

Or you can set partial of responsive breakpoints.

Live Editor

<Grid columns={{ xs: 1, md: 3, xl: 5 }} columnGap='20px' rowGap='20px'> <BorderBox>Item1</BorderBox> <BorderBox>Item2</BorderBox> <BorderBox>Item3</BorderBox> <BorderBox>Item4</BorderBox> <BorderBox>Item5</BorderBox> <BorderBox>Item6</BorderBox> </Grid>

<Grid columns={{ xs: 1, md: 3, xl: 5 }} columnGap='20px' rowGap='20px'>
  <BorderBox>Item1</BorderBox>
  <BorderBox>Item2</BorderBox>
  <BorderBox>Item3</BorderBox>
  <BorderBox>Item4</BorderBox>
  <BorderBox>Item5</BorderBox>
  <BorderBox>Item6</BorderBox>
</Grid>

Result

Loading...