Grid layout
Grid layout
Resources
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.
Examples
How to use
Accessibility
Density
Mode
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
GridItemcomponents 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 theGridLayoutcomponent. - Any items displayed beyond 12 columns (or the number of defined columns) will wrap to a subsequent row.
- Use
columnGapandrowGapproperties to set a specific gap in a particular dimension orgapto update both values simultaneously.