CSS Grid is the most powerful two-dimensional layout system available in CSS. It lets you control both rows and columns simultaneously, making complex page layouts simple and intuitive. This complete CSS Grid cheat sheet covers every property with practical code examples so you can master grid-based layouts for any project.
Build flexbox layouts visually with our Flexbox Generator →
Convert CSS units easily with our CSS Unit Converter →
Grid Container Properties
CSS Grid starts with a grid container. Set display: grid on a parent element and its direct children become grid items. You define the structure of rows and columns on the container, and items are placed into the resulting grid cells.
display: grid | inline-grid
This defines a grid container. grid creates a block-level grid container; inline-grid creates an inline-level one that flows with surrounding text.
.grid-container {
display: grid; /* block-level grid container */
}
.inline-grid-container {
display: inline-grid; /* inline-level grid container */
}grid-template-columns
Defines the number and size of columns in your grid. You can use fixed lengths, percentages, the fr unit, or the repeat() function.
.container {
display: grid;
/* Fixed-width columns */
grid-template-columns: 200px 200px 200px;
/* Mixed units */
grid-template-columns: 200px 1fr 2fr;
/* Percentage-based */
grid-template-columns: 25% 50% 25%;
/* Using repeat() */
grid-template-columns: repeat(3, 1fr);
/* Named grid lines */
grid-template-columns: [start] 1fr [center] 2fr [end];
}grid-template-rows
Defines the number and size of rows. Works exactly like grid-template-columns but for the vertical axis.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* Fixed-height rows */
grid-template-rows: 80px 200px 80px;
/* Auto-sized rows */
grid-template-rows: auto 1fr auto;
/* Using minmax() for flexible rows */
grid-template-rows: minmax(100px, auto) 1fr minmax(60px, auto);
}The fr Unit & repeat()
The fr (fractional) unit represents a fraction of the available space in the grid container. Combined with repeat(), it provides a flexible and concise way to define grid tracks.
Fractional Units (fr)
The fr unit distributes remaining space after fixed-size tracks are allocated. It is the most important unit in CSS Grid for creating flexible layouts.
/* Equal columns */
.container {
grid-template-columns: 1fr 1fr 1fr;
/* Each column gets 1/3 of available space */
}
/* Proportional columns */
.container {
grid-template-columns: 1fr 2fr 1fr;
/* Middle column is twice as wide: 25% | 50% | 25% */
}
/* Mixed fixed and flexible */
.container {
grid-template-columns: 250px 1fr;
/* Fixed 250px sidebar, content fills the rest */
}
/* Multiple fixed + fr */
.container {
grid-template-columns: 80px 1fr 1fr 80px;
/* 80px | flexible | flexible | 80px */
}repeat() Function
The repeat() function avoids repetitive track definitions. It accepts a repeat count and a track list.
/* Basic repeat */
grid-template-columns: repeat(3, 1fr);
/* Equivalent to: 1fr 1fr 1fr */
/* Repeat with fixed size */
grid-template-columns: repeat(4, 200px);
/* Equivalent to: 200px 200px 200px 200px */
/* Repeat a pattern */
grid-template-columns: repeat(3, 1fr 2fr);
/* Equivalent to: 1fr 2fr 1fr 2fr 1fr 2fr */
/* Mix repeat with other values */
grid-template-columns: 100px repeat(3, 1fr) 100px;
/* Equivalent to: 100px 1fr 1fr 1fr 100px */
/* Repeat with minmax() */
grid-template-columns: repeat(3, minmax(200px, 1fr));auto-fill & auto-fit with minmax()
These keywords inside repeat() create responsive grids without media queries. They automatically determine how many tracks can fit in the container.
/* auto-fill: create as many 200px+ columns as fit */
.container {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* Fills row with columns, empty tracks remain */
}
/* auto-fit: same but collapse empty tracks */
.container {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/* Items stretch to fill entire row */
}
/* Practical responsive card grid */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}Grid Gap
The gap property (formerly grid-gap) controls spacing between grid tracks. Unlike margins, gaps only appear between items, not on the outer edges of the grid.
gap, row-gap, column-gap
You can set gaps uniformly or independently for rows and columns.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* Equal gap in both directions */
gap: 16px;
/* Different row and column gaps */
gap: 20px 12px; /* row-gap: 20px, column-gap: 12px */
/* Individual properties */
row-gap: 20px;
column-gap: 12px;
}
/* Legacy syntax (still works) */
.container {
grid-gap: 16px;
grid-row-gap: 20px;
grid-column-gap: 12px;
}
/* Common gap values for different contexts */
.tight-grid { gap: 8px; } /* compact UI */
.normal-grid { gap: 16px; } /* standard spacing */
.spacious-grid { gap: 24px; } /* card layouts */
.loose-grid { gap: 32px; } /* landing pages */Grid Template Areas
Grid template areas let you name regions of your grid and place items by referencing those names. This creates a visual, ASCII-art-like representation of your layout directly in CSS.
Defining Named Areas
Use grid-template-areas on the container and grid-area on items to assign them to named regions.
/* Define the grid structure visually */
.page {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 60px 1fr 60px;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
min-height: 100vh;
}
/* Assign items to named areas */
.page > header { grid-area: header; }
.page > aside { grid-area: sidebar; }
.page > main { grid-area: content; }
.page > footer { grid-area: footer; }
/* HTML structure:
<div class="page">
<header>Header</header>
<aside>Sidebar</aside>
<main>Content</main>
<footer>Footer</footer>
</div>
*/Empty Cells & Complex Layouts
Use a dot (.) to denote empty cells. Each row in the template must have the same number of columns.
/* Using dots for empty cells */
.dashboard {
display: grid;
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: auto 1fr 1fr auto;
grid-template-areas:
"nav header header"
"nav main aside"
"nav main ."
"nav footer footer";
gap: 16px;
min-height: 100vh;
}
/* Three-column layout with empty corners */
.layout {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
". header ."
"left center right"
". footer .";
}Grid Item Placement
Grid items can be explicitly placed using line numbers, spans, or named areas. Grid lines are numbered starting from 1 at the start edge.
grid-column & grid-row
These shorthand properties define where an item starts and ends on the column and row axes using grid line numbers.
/*
Grid lines are numbered:
Column lines: 1 | 2 | 3 | 4
Row lines: 1 -- 2 -- 3 -- 4
3-column grid has 4 column lines
3-row grid has 4 row lines
*/
.item {
/* Start at column line 1, end at column line 3 */
grid-column-start: 1;
grid-column-end: 3;
/* Shorthand: start / end */
grid-column: 1 / 3; /* spans columns 1-2 */
grid-row: 1 / 2; /* occupies first row */
}
/* Using negative line numbers (count from the end) */
.full-width {
grid-column: 1 / -1; /* spans all columns */
}
.last-two-columns {
grid-column: -3 / -1; /* last two columns */
}Spanning Multiple Tracks
The span keyword lets an item span multiple columns or rows without specifying exact end lines.
/* Span 2 columns from auto-placement position */
.wide-item {
grid-column: span 2;
}
/* Span 3 rows */
.tall-item {
grid-row: span 3;
}
/* Span 2 columns starting from line 2 */
.specific-item {
grid-column: 2 / span 2; /* lines 2 to 4 */
}
/* Create a featured card spanning 2x2 */
.featured {
grid-column: span 2;
grid-row: span 2;
}grid-area Shorthand
The grid-area property is a shorthand for grid-row-start, grid-column-start, grid-row-end, and grid-column-end in a single declaration.
/* grid-area: row-start / col-start / row-end / col-end */
.item {
grid-area: 1 / 1 / 3 / 3;
/* Equivalent to:
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 3;
grid-column-end: 3;
*/
}
/* Span the top-left 2x2 area */
.top-left {
grid-area: 1 / 1 / 3 / 3;
}
/* Full-width header */
.header {
grid-area: 1 / 1 / 2 / -1;
}
/* Named area assignment (with grid-template-areas) */
.sidebar {
grid-area: sidebar; /* matches name in grid-template-areas */
}Alignment
CSS Grid provides six alignment properties that control how items are positioned within their grid cells and how the entire grid is positioned within its container.
justify-items & align-items
These properties align all grid items within their cells. justify-items aligns along the inline (row) axis; align-items aligns along the block (column) axis.
.container {
display: grid;
grid-template-columns: repeat(3, 200px);
/* Align items horizontally within their cells */
justify-items: start; /* items hug the left edge */
justify-items: end; /* items hug the right edge */
justify-items: center; /* items centered horizontally */
justify-items: stretch; /* items fill cell width (default) */
/* Align items vertically within their cells */
align-items: start; /* items hug the top edge */
align-items: end; /* items hug the bottom edge */
align-items: center; /* items centered vertically */
align-items: stretch; /* items fill cell height (default) */
}justify-content & align-content
These properties align the entire grid within the grid container when the grid is smaller than the container. justify-content aligns horizontally; align-content aligns vertically.
.container {
display: grid;
grid-template-columns: repeat(3, 200px);
/* Total grid width: 600px, container might be wider */
/* Horizontal alignment of the entire grid */
justify-content: start; /* grid at the left */
justify-content: end; /* grid at the right */
justify-content: center; /* grid centered */
justify-content: space-between; /* equal space between tracks */
justify-content: space-around; /* equal space around tracks */
justify-content: space-evenly; /* equal space everywhere */
/* Vertical alignment of the entire grid */
align-content: start;
align-content: end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
}place-items & place-content
These are shorthands that combine align and justify in a single declaration.
/* place-items: <align-items> <justify-items> */
.container {
place-items: center; /* center in both axes */
place-items: start end; /* top-right corner */
place-items: center stretch; /* centered vertically, full width */
}
/* place-content: <align-content> <justify-content> */
.container {
place-content: center; /* center entire grid */
place-content: start center; /* top, centered horizontally */
}
/* Perfect centering of grid items */
.container {
display: grid;
place-items: center;
min-height: 100vh;
}justify-self & align-self
These properties override alignment for individual grid items, overriding justify-items and align-items respectively.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: start; /* all items left-aligned */
}
/* Override for a specific item */
.special-item {
justify-self: center; /* this item centered in its cell */
align-self: end; /* this item at bottom of its cell */
}
/* Values: start | end | center | stretch */
.item-a { justify-self: start; } /* left */
.item-b { justify-self: center; } /* center */
.item-c { justify-self: end; } /* right */
.item-d { justify-self: stretch; } /* full width */Auto Flow & Implicit Grids
When you don't explicitly place every item, CSS Grid uses an auto-placement algorithm. The grid-auto-flow property controls how auto-placed items fill the grid.
grid-auto-flow
Controls the direction and packing behavior of auto-placed items.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* Fill row by row (default) */
grid-auto-flow: row;
/* [1] [2] [3]
[4] [5] [6] */
/* Fill column by column */
grid-auto-flow: column;
/* [1] [3] [5]
[2] [4] [6] */
/* Dense packing: fill gaps left by larger items */
grid-auto-flow: row dense;
/* Without dense: [wide] [ ] [3] (gap at position 2)
With dense: [wide] [3] [4] (gap filled) */
grid-auto-flow: column dense;
}Implicit Grid Tracks
When items are placed outside the explicitly defined grid, implicit tracks are created. Use grid-auto-rows and grid-auto-columns to size these implicit tracks.
/* Only 2 rows defined, but we have 9 items */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 100px;
/* Implicit rows get this height */
grid-auto-rows: 150px;
/* Use minmax for flexible implicit rows */
grid-auto-rows: minmax(100px, auto);
}
/* Implicit columns (when using grid-auto-flow: column) */
.container {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-auto-flow: column;
grid-auto-columns: 200px;
grid-auto-columns: minmax(150px, 1fr);
}
/* Common pattern: unknown number of rows */
.feed {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: minmax(80px, auto);
gap: 16px;
}Responsive Grid Patterns
CSS Grid excels at creating responsive layouts. Here are the most common responsive patterns, many of which require zero media queries.
auto-fill vs auto-fit
Both create responsive grids, but they differ when there are fewer items than available columns. auto-fill keeps empty tracks; auto-fit collapses them.
/* auto-fill: keeps empty tracks */
.grid-auto-fill {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
/* Container: 800px, items: 2
Result: [item1] [item2] [empty] [empty]
4 tracks of ~200px each */
/* auto-fit: collapses empty tracks */
.grid-auto-fit {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
/* Container: 800px, items: 2
Result: [ item1 ] [ item2 ]
2 tracks of 400px each — items stretch */
/* Rule of thumb:
- auto-fit → items stretch to fill row (most common)
- auto-fill → consistent column widths */Responsive with minmax()
The minmax() function sets a minimum and maximum size for grid tracks, enabling fluid responsive behavior.
/* minmax(min, max) */
grid-template-columns: minmax(200px, 1fr); /* 200px to 1fr */
grid-template-columns: minmax(0, 300px); /* 0 to 300px */
grid-template-rows: minmax(100px, auto); /* at least 100px */
/* Responsive grid: no media queries needed */
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
}
/* 1 column on mobile, 2 on tablet, 3+ on desktop */
/* Preventing overflow on small screens */
.safe-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: 16px;
}
/* min(100%, 300px) ensures items don't overflow on narrow screens */Grid with Media Queries
For more complex responsive changes, combine CSS Grid with traditional media queries to alter the grid structure at different breakpoints.
/* Mobile-first responsive grid */
.page-layout {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"content"
"sidebar"
"footer";
gap: 16px;
}
/* Tablet: sidebar beside content */
@media (min-width: 768px) {
.page-layout {
grid-template-columns: 250px 1fr;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
}
}
/* Desktop: add right sidebar */
@media (min-width: 1200px) {
.page-layout {
grid-template-columns: 250px 1fr 200px;
grid-template-areas:
"header header header"
"sidebar content aside"
"footer footer footer";
}
}Common Grid Layouts
Here are production-ready CSS Grid layout patterns that you can use directly in your projects.
Holy Grail Layout
The classic page layout with header, footer, main content, and two sidebars — achievable with just a few lines of Grid CSS.
/* Holy Grail Layout with CSS Grid */
.holy-grail {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"left main right"
"footer footer footer";
min-height: 100vh;
gap: 16px;
}
.holy-grail > header { grid-area: header; }
.holy-grail > .left { grid-area: left; }
.holy-grail > main { grid-area: main; }
.holy-grail > .right { grid-area: right; }
.holy-grail > footer { grid-area: footer; }
/* Make it responsive */
@media (max-width: 768px) {
.holy-grail {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main"
"left"
"right"
"footer";
}
}Dashboard Layout
A dashboard with a fixed sidebar, header, and a content area filled with cards of varying sizes.
/* Dashboard Layout */
.dashboard {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 64px 1fr;
grid-template-areas:
"sidebar header"
"sidebar content";
min-height: 100vh;
}
.dashboard > .sidebar { grid-area: sidebar; }
.dashboard > .header { grid-area: header; }
.dashboard > .content { grid-area: content; }
/* Dashboard content area with cards */
.dashboard-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
grid-auto-rows: minmax(200px, auto);
gap: 20px;
padding: 20px;
}
/* Featured card spans 2 columns */
.dashboard-cards .featured {
grid-column: span 2;
}
/* Tall card spans 2 rows */
.dashboard-cards .tall {
grid-row: span 2;
}Responsive Card Grid
An auto-responsive card grid that adapts to any screen width without media queries.
/* Auto-responsive card grid — no media queries */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}
/* Prevent overflow on very small screens */
.card-grid-safe {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: 24px;
}
/* Card with internal grid layout */
.card {
display: grid;
grid-template-rows: 200px 1fr auto;
/* image area | content | footer */
}
.card .image { object-fit: cover; width: 100%; height: 100%; }
.card .body { padding: 16px; }
.card .footer { padding: 16px; border-top: 1px solid #eee; }Masonry-like Layout
While true masonry requires JavaScript or the experimental masonry value, you can approximate it using grid-auto-rows and row spanning.
/* Masonry-like layout using grid-auto-rows */
.masonry {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-rows: 20px; /* small row height as base unit */
gap: 16px;
}
/* Items span different numbers of rows */
.masonry .item-small { grid-row: span 8; } /* 160px + gaps */
.masonry .item-medium { grid-row: span 12; } /* 240px + gaps */
.masonry .item-large { grid-row: span 16; } /* 320px + gaps */
.masonry .item-tall { grid-row: span 20; } /* 400px + gaps */
/* Alternative: CSS Columns for true masonry */
.masonry-columns {
column-count: 3;
column-gap: 16px;
}
.masonry-columns .item {
break-inside: avoid;
margin-bottom: 16px;
}Sidebar + Content
A simple two-column layout with a fixed-width sidebar and flexible content area.
/* Fixed sidebar + flexible content */
.sidebar-layout {
display: grid;
grid-template-columns: 280px 1fr;
min-height: 100vh;
}
/* Collapsible sidebar */
.sidebar-layout.collapsed {
grid-template-columns: 64px 1fr;
}
/* Responsive: stack on mobile */
@media (max-width: 768px) {
.sidebar-layout {
grid-template-columns: 1fr;
}
}
/* Sidebar on the right */
.sidebar-right {
display: grid;
grid-template-columns: 1fr 300px;
}
/* Both sidebars */
.three-column {
display: grid;
grid-template-columns: 200px 1fr 250px;
gap: 24px;
}Grid vs Flexbox
CSS Grid and Flexbox are complementary layout systems. Understanding when to use each one is essential for efficient CSS architecture.
CSS Grid is best for:
- Two-dimensional layouts (rows and columns together)
- Layout-driven sizing (the layout dictates item sizes)
- Complex page layouts with header, sidebar, content, footer
- Dashboard-style layouts with varying card sizes
- Overlapping elements in a grid
- When you need precise control over both axes simultaneously
Flexbox is best for:
- One-dimensional layouts (a single row or column)
- Content-driven sizing (items determine their own width)
- Navigation bars, toolbars, button groups
- Centering elements
- Dynamic, unknown number of items in a single line
- Components where items should wrap naturally
| Feature | CSS Grid | Flexbox |
|---|---|---|
| Dimensions | Two-dimensional (rows + columns) | One-dimensional (row or column) |
| Layout approach | Layout-first (define structure, place items) | Content-first (items determine layout) |
| Track sizing | Explicit row and column tracks | Items size themselves |
| Overlap | Items can overlap (grid-area) | No built-in overlap |
| Use case | Page layouts, dashboards, galleries | Nav bars, toolbars, card rows |
In practice, the best approach is to combine both: use Grid for the overall page layout and Flexbox for component-level alignment within grid cells.
/* Best practice: combine Grid + Flexbox */
.page {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
/* Flexbox inside grid areas */
.page header {
grid-area: header;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
}
.page main {
grid-area: main;
}
/* Flexbox for card internals inside a grid layout */
.page main .card {
display: flex;
flex-direction: column;
}
.page main .card .body { flex: 1; }
.page main .card .actions {
display: flex;
gap: 8px;
justify-content: flex-end;
}Browser Support & Fallbacks
CSS Grid has excellent browser support in all modern browsers. Here is a summary of feature support.
| Feature | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| Basic Grid | 57+ | 52+ | 10.1+ | 16+ |
| gap (in Grid) | 66+ | 61+ | 12+ | 16+ |
| grid-template-areas | 57+ | 52+ | 10.1+ | 16+ |
| subgrid | 117+ | 71+ | 16+ | 117+ |
| masonry (experimental) | -- | flag | -- | -- |
CSS Grid has over 97% global browser support. For the small percentage of older browsers, use @supports to provide fallbacks:
/* Feature detection with @supports */
.container {
/* Fallback: Flexbox layout */
display: flex;
flex-wrap: wrap;
gap: 16px;
}
@supports (display: grid) {
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
}
/* Progressive enhancement for subgrid */
.card {
display: grid;
grid-template-rows: auto 1fr auto;
}
@supports (grid-template-rows: subgrid) {
.card-grid .card {
grid-row: span 3;
grid-template-rows: subgrid;
}
}Frequently Asked Questions
What is the difference between CSS Grid and Flexbox?
CSS Grid is a two-dimensional layout system that controls both rows and columns simultaneously, making it ideal for page-level layouts. Flexbox is one-dimensional, handling either a row or a column at a time, making it ideal for component-level layouts. Grid is layout-first (you define the structure and place items into it), while Flexbox is content-first (items determine their own size and the layout adapts). In practice, you should use both together — Grid for page structure and Flexbox for component internals.
What does fr mean in CSS Grid?
The fr unit stands for "fraction" and represents a fraction of the available free space in the grid container. For example, grid-template-columns: 1fr 2fr 1fr creates three columns where the middle column gets twice as much space as each side column. The fr unit only distributes space remaining after fixed-size tracks (px, rem, etc.) have been allocated, making it perfect for flexible, responsive layouts.
How do I create a responsive grid without media queries?
Use repeat(auto-fit, minmax(min, 1fr)) or repeat(auto-fill, minmax(min, 1fr)). For example, grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) creates columns that are at least 250px wide and automatically wrap to new rows as the container shrinks. auto-fit collapses empty tracks so items stretch to fill the row, while auto-fill keeps empty tracks.
What is the difference between auto-fill and auto-fit?
Both auto-fill and auto-fit create as many tracks as will fit in the container. The difference appears when there are fewer items than available columns: auto-fill keeps the empty tracks, maintaining their width as empty space; auto-fit collapses empty tracks to zero width, allowing existing items to stretch and fill the entire row. Use auto-fit when you want items to expand, and auto-fill when you want consistent column widths regardless of item count.
Can I use CSS Grid for a masonry layout?
Native CSS masonry is an experimental feature (grid-template-rows: masonry) currently only supported in Firefox behind a flag. For production, you can approximate masonry with CSS Grid by using grid-auto-rows with small values and spanning items across different numbers of rows, but true masonry where items fill gaps vertically still requires JavaScript libraries like Masonry.js or CSS Columns as an alternative approach. The CSS masonry specification is actively being developed and may reach broader browser support in the future.
CSS Grid is the definitive layout system for modern web development. Combined with Flexbox for component-level alignment, it gives you complete control over any layout. Practice with our interactive tools to solidify your understanding.