What is CSS Grid?
CSS Grid Layout is a two-dimensional layout system that lets you control both rows and columns at the same time, making it ideal for full page layouts and complex component structures.
TL;DR
- 1.CSS Grid controls both rows and columns simultaneously (two-dimensional).
- 2.Use
grid-template-columnsandgrid-template-rowsto define your track sizes. - 3.The
frunit distributes remaining space proportionally, similar to flex-grow. - 4.
repeat(auto-fit, minmax(250px, 1fr))creates responsive grids without media queries.
Simple Explanation
Think of CSS Grid as a spreadsheet. You define how many columns and rows you want and how wide/tall they are. Then you place items into specific cells -- or let the browser fill them in automatically.
Compare that to Flexbox, which is more like a single shelf where items line up in one direction. Grid gives you the entire wall of shelves -- rows and columns at once.
Grid is perfect for page-level layouts (header, sidebar, main, footer) and for anything that needs items to line up both horizontally and vertically, like an image gallery or a dashboard.
How It Works
Add display: grid to the parent and define your columns and rows. Children auto-place into cells.
Three equal columns
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}Responsive auto-fit grid
.grid {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}Columns automatically wrap based on available space -- no media queries needed. Try resizing your browser window.
Named grid areas (page layout)
.layout {
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;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }Key Properties
grid-template-columnstrack sizes (e.g. 1fr 2fr, repeat(3, 1fr), 200px auto)
Defines the number and size of columns in the grid.
grid-template-rowstrack sizes (e.g. auto 1fr 100px)
Defines the number and size of rows.
gapany length (e.g. 16px, 1rem 2rem)
Sets spacing between rows and columns. Can use two values for row/column independently.
grid-template-areasnamed strings (e.g. "header header" "sidebar main")
Defines named areas you can assign children to with grid-area.
grid-column / grid-rowline numbers (e.g. 1 / 3, span 2)
Lets a child span multiple columns or rows.
place-itemsstart | center | end | stretch
Shorthand for align-items + justify-items to position children within their cells.
Common Mistakes
Don't
/* Using percentages for columns
(breaks with gap) */
.grid {
display: grid;
grid-template-columns: 33% 33% 33%;
gap: 16px; /* Overflows! */
}Do
/* Use fr units -- they account
for gap automatically */
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}Don't
/* Hardcoding column count for
responsive layouts */
.grid {
grid-template-columns:
repeat(4, 1fr);
/* Breaks on small screens */
}Do
/* Let columns auto-adjust */
.grid {
grid-template-columns:
repeat(auto-fit,
minmax(250px, 1fr));
}
Inspect CSS Grid templates on any website
Frontend Hero's CSS Scanner shows you grid-template-columns, rows, gap, and named areas for any element. Learn Grid by inspecting real layouts.
Try CSS Scanner →Browser Support
CSS Grid is fully supported in all modern browsers (Chrome, Firefox, Safari, Edge) with over 97% global coverage. Subgrid has slightly lower support but is available in Chrome 117+, Firefox 71+, and Safari 16+.
Related Tools
Frequently Asked Questions
Neither is universally better -- they solve different problems. CSS Grid excels at two-dimensional layouts where you need to control rows and columns together (dashboards, page layouts, image galleries). Flexbox excels at one-dimensional layouts along a single axis (navbars, button groups, card content). Most real-world projects use both together.
The fr unit stands for 'fraction of available space.' If you write grid-template-columns: 1fr 2fr, the first column gets 1/3 of the space and the second gets 2/3. It's similar to flex-grow ratios but designed specifically for grid tracks. You can mix fr with fixed units like grid-template-columns: 200px 1fr.
grid-template defines explicit tracks -- you tell the browser exactly how many rows/columns you want and their sizes. grid-auto handles implicit tracks -- rows or columns the browser creates automatically when content overflows the explicit grid. For example, grid-auto-rows: 200px sets the height for any extra rows that are created automatically.
Use auto-fit or auto-fill with minmax(). For example: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)). This creates as many columns as can fit, each at least 250px wide, and they grow to fill available space. No media queries needed.
Yes. Unlike Flexbox, Grid lets you place items in overlapping cells using grid-row and grid-column. Combined with z-index, you can layer items on top of each other. This is useful for hero sections with text over images, or decorative overlapping card layouts.
CSS Glossary
What is Flexbox?
One-dimensional layout model
What is Z-Index?
Stacking order and contexts
What is Box-Sizing?
Control element sizing model
What is CSS Specificity?
How browsers resolve conflicts
What is the CSS Cascade?
Rule priority and inheritance
What is Box Shadow?
Add depth with shadow effects
What is a CSS Reset?
Normalize browser defaults
What is Tailwind CSS?
Utility-first CSS framework
What is Responsive Design?
Adapt layouts to any screen