Grid layout

Also known as

Column layout, Responsive grid

GridLayout and GridItem manage the layout of the main content area in your application screen or webpage. It aligns content to a system of equally distributed columns and rows to create a cohesive and organized user interface. When combined with responsive breakpoints, You can configure GridLayout to determine the display of specific content across different viewport sizes or device screen sizes.


GridLayout defaults to a 12-column grid with one row. The spacing between rows and columns depends on the prop gap, which is 3 by default.

Content in GridLayout is inside GridItem components. This helps control the size and position of content.

  • We recommend GridItem components for displaying content in the layout. If the layout is very simple (i.e., doesn't span multiple columns or rows), you can place content (e.g., components, text, divs, etc) directly into the GridLayout component.
  • Any items displayed beyond 12 columns (or the number of defined columns) will wrap to a subsequent row.
  • Use columnGap and rowGap properties to set a specific gap in a particular dimension or gap to update both values simultaneously.