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.

When building a page layout, it's important to make sure you apply semantic HTML by using the correct HTML elements for their intended purpose as much as possible.

The GridLayout and GridItem components support this behavior by allowing access to a prop called as that allows you to render the appropriate HTML instead of a plain div.