Syntax
display: grid;Examples
Basic Grid
Creating a simple grid with defined columns and automatic rows.
/* Demo setup: sizing, structure or neutral surfaces. */
.preview-tile{padding:1rem;background:#fef3c7;color:#422006;border:1px solid #d97706}.preview-frame{border:1px dashed #94a3b8;padding:1rem;margin-block:1rem}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 20px;
}
.grid-item {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px;
border-radius: 8px;
text-align: center;
}- Each course tile is a grid item rather than a generic preview box.
- repeat creates three tracks and gap supplies spacing between them.
- Resize the preview or edit the track sizes to compare the arrangement.
HTML used by this example
<div class="grid-container"><div class="grid-item">HTML lesson</div><div class="grid-item">CSS lesson</div><div class="grid-item">JavaScript lesson</div><div class="grid-item">Practice project</div><div class="grid-item">Review notes</div><div class="grid-item">Next steps</div></div>Responsive Grid
Using auto-fit and minmax for responsive grids that adapt to screen size.
/* Demo setup: sizing, structure or neutral surfaces. */
.preview-tile{padding:1rem;background:#fef3c7;color:#422006;border:1px solid #d97706}.preview-frame{border:1px dashed #94a3b8;padding:1rem;margin-block:1rem}
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
/* Grid will automatically adjust number of columns based on available space */
.responsive-grid .item {
background: #4CAF50;
color: white;
padding: 40px;
border-radius: 10px;
}- Each course tile is a grid item rather than a generic preview box.
- auto-fit and minmax choose how many course tiles fit at the available width.
- Resize the preview or edit the track sizes to compare the arrangement.
HTML used by this example
<div class="responsive-grid"><div class="item preview-tile">HTML lesson</div><div class="item preview-tile">CSS lesson</div><div class="item preview-tile">JavaScript lesson</div><div class="item preview-tile">Practice project</div><div class="item preview-tile">Review notes</div><div class="item preview-tile">Next steps</div></div>Grid Areas
Defining named grid areas for intuitive layout structure.
/* Demo setup: sizing, structure or neutral surfaces. */
.preview-tile{padding:1rem;background:#fef3c7;color:#422006;border:1px solid #d97706}.preview-frame{border:1px dashed #94a3b8;padding:1rem;margin-block:1rem}
.page-layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 80px 1fr 60px;
gap: 15px;
height: 26rem;
}
.header { grid-area: header; background: #333; }
.sidebar { grid-area: sidebar; background: #555; }
.main { grid-area: main; background: #777; }
.footer { grid-area: footer; background: #333; }
.page-layout > * { color: white; }- The named regions are real header, navigation-side, main and footer elements.
- Each grid-area declaration connects an element to the template’s named cells.
- Edit a template row and observe the region placement.
HTML used by this example
<div class="page-layout"><header class="header preview-tile">Course header</header><aside class="sidebar preview-tile">Lessons</aside><main class="main preview-tile">Current lesson</main><footer class="footer preview-tile">Course footer</footer></div>Complex Layout
Creating asymmetric layouts with different sized grid items.
/* Demo setup: sizing, structure or neutral surfaces. */
.preview-tile{padding:1rem;background:#fef3c7;color:#422006;border:1px solid #d97706}.preview-frame{border:1px dashed #94a3b8;padding:1rem;margin-block:1rem}
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 200px);
gap: 10px;
}
/* Span multiple columns/rows */
.featured {
grid-column: 1 / 3; /* Span 2 columns */
grid-row: 1 / 3; /* Span 2 rows */
background: #ff6b6b;
}
.wide {
grid-column: span 2; /* Span 2 columns */
background: #4ecdc4;
}
.tall {
grid-row: span 2; /* Span 2 rows */
background: #45b7d1;
}- The featured and tall items span different numbers of grid tracks.
- The remaining items use the available auto-placement slots.
- The DOM order remains the reading order even when the visual layout uses spans.
HTML used by this example
<div class="gallery"><article class="featured preview-tile">Featured tutorial</article><article class="tall preview-tile">Long reference</article><div class="wide preview-tile">Practice</div><div class="preview-tile">Quiz</div><div class="preview-tile">Notes</div><div class="preview-tile">Review</div></div>Parameters and values
- display (grid | inline-grid): Defines a grid container
- grid-template-columns (track-size): Defines column tracks
- grid-template-rows (track-size): Defines row tracks
- grid-template-areas (string): Defines named grid areas
- gap (length): Sets spacing between grid items
- grid-column (start / end): Item column placement
- grid-row (start / end): Item row placement
Best practices
- Use Grid for two-dimensional layouts requiring both row and column control
- Prefer fr units over percentages for flexible, responsive columns
- Use repeat() and auto-fit/auto-fill for responsive grids without media queries
- Name grid areas with grid-template-areas for readable, maintainable layouts
- Combine minmax() with auto-fit for truly responsive designs
- Use gap instead of margins for consistent spacing between grid items
Browser compatibility
- chrome
- Yes
- firefox
- Yes
- safari
- Yes
- edge
- Yes
These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.
CSS specifications (modules)