What Makes Grid Different from Flexbox
Flexbox and Grid are complementary tools, not competitors. Flexbox is one-dimensional — you work with either a row or a column at a time. Grid is two-dimensional — you define both rows and columns simultaneously and place items precisely within that structure.
Use Flexbox when you have a list of items and want them to flow naturally (navigation bars, card rows, toolbars). Use Grid when you're designing a specific layout structure — a page layout with header, sidebar, main, footer; a photo gallery; a dashboard — where you need explicit control over both dimensions at once.
Defining a Grid
.container {
display: grid;
/* Define columns */
grid-template-columns: 200px 1fr 1fr; /* 3 columns: fixed | flexible | flexible */
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* responsive */
/* Define rows */
grid-template-rows: auto 1fr auto; /* header | main | footer */
/* Gap between cells */
gap: 24px; /* row and column gap */
row-gap: 16px;
column-gap: 24px;
}The fr unit (fraction) is the most important concept in Grid. It represents a fraction of the available space after fixed sizes are accounted for. repeat(3, 1fr) creates three equal-width columns that together fill the container — and they resize proportionally with the viewport.
Placing Items on the Grid
By default, Grid places items in the next available cell. But you can explicitly position items using line numbers.
.item {
grid-column: 1 / 3; /* spans from column line 1 to line 3 (2 columns wide) */
grid-column: 1 / -1; /* spans from start to end (full width) */
grid-column: span 2; /* spans 2 columns wide from wherever it starts */
grid-row: 2 / 4; /* spans 2 rows */
}Grid line numbers start at 1 and negative numbers count from the end. 1 / -1 always means "full width," regardless of how many columns your grid has — extremely useful for responsive designs.
Grid Template Areas
Grid Template Areas are one of the most human-readable layout tools in CSS. They let you name areas and assign elements to them using ASCII-art-style syntax.
.layout {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 64px 1fr 56px;
grid-template-areas:
"header header"
"sidebar main "
"footer footer";
min-height: 100vh;
}
header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }The visual layout of the template literally shows you how the page will be structured. Adding a media query that changes grid-template-areas makes the layout switch to mobile with a single CSS block.
Responsive Grids with auto-fit and minmax
This single line of CSS creates a responsive grid that automatically adjusts column count based on viewport width — with no media queries at all.
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}auto-fit creates as many columns as will fit. minmax(280px, 1fr) says each column should be at least 280px wide and can grow to fill available space. The result: on a wide screen you get 4 columns, on a tablet 2 columns, on mobile 1 column — automatically.