Display Grid
The default tag of Grid is '<div>'Grid Template Columns
Grid Template Columns Result Preview - No Media Screen
Grid Template Columns Result Preview - With Media Screen
Try to resize the screen and see the effect!Grid Template Columns Result Code Preview
// no Media Screen
<Grid container cols={4}>
<Grid item />
<Grid item />
<Grid item />
<Grid item />
</Grid>
// With Media Screen
<Grid container cols={{ xs: 1, md: 2, lg: 4 }}>
<Grid item />
<Grid item />
<Grid item />
<Grid item />
</Grid>
Grid Template Rows
Grid Template Rows Result Preview - No Media Screen
Grid Template Rows Result Preview - With Media Screen
Try to resize the screen and see the effect!Grid Template Rows Result Code Preview
// no Media Screen
<Grid container rows="150px 200px 150px 200px">
<Grid item />
<Grid item />
<Grid item />
<Grid item />
</Grid>
// With Media Screen
<Grid container rows={{ xs: "auto", lg: "150px 200px 150px 200px" }}>
<Grid item />
<Grid item />
<Grid item />
<Grid item />
</Grid>
Grid Template Areas
Grid Template Rows Result Preview - No Media Screen
Grid Template Areas Result Code Preview
<Preview title="Result Preview - No Media Screen" member="Grid Template Rows" noLandfield>
<Grid container gap={spacing.sm}>
{nextJsExample.map(({ title, href, description }) =>
<ItemExample
item="grid"
key={title}
title={title}
href={href}
description={description}
/>
)}
</Grid>
</Preview>