CSS Grid is a powerful two-dimensional layout system that lets you create complex layouts with rows and columns simultaneously. Unlike Flexbox (which is one-dimensional), Grid excels at creating page-level layouts, image galleries, forms, and any design that needs precise control over both horizontal and vertical positioning. It's the most powerful layout tool in modern CSS.
What Is CSS Grid?
CSS Grid Layout divides a page into major regions with rows and columns, allowing you to position elements precisely in a two-dimensional space.
Key Grid Concepts
- Grid Container: Parent element with
display: grid - Grid Items: Direct children of grid container
- Grid Lines: Dividing lines that create the grid structure
- Grid Tracks: Space between two grid lines (rows or columns)
- Grid Cells: Single unit of the grid (intersection of row and column)
- Grid Areas: Rectangular space spanning multiple cells
- Two-Dimensional: Controls both rows AND columns simultaneously
/* Create a grid container */
.container {
display: grid; /* All direct children become grid items */
}
/* Define columns and rows */
.container {
display: grid;
grid-template-columns: 200px 200px 200px; /* 3 columns */
grid-template-rows: 100px 100px; /* 2 rows */
gap: 20px; /* Space between items */
}
/* Using fr units (fractional units) */
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
grid-template-rows: 200px auto; /* First row 200px, second auto */
}Normal Flow vs Grid Layout
Grid vs Flexbox: Use Flexbox for one-dimensional layouts (navigation bars, card rows). Use Grid for two-dimensional layouts (page structure, image galleries, forms). Often, you'll use both together—Grid for page layout, Flexbox for component internals.
Grid Container
To create a grid, set display: grid on a parent element. All direct children automatically become grid items.
/* Create grid container */
.container {
display: grid; /* Block-level grid container */
display: inline-grid; /* Inline-level grid container */
}
/* Only direct children become grid items */
.container {
display: grid;
}
.container > .child {
/* This is a grid item ✓ */
}
.container > .child > .grandchild {
/* This is NOT a grid item ✗ */
}display: grid vs inline-grid
Grid Terminology
Understanding Grid terminology is essential for working with the layout system effectively.
Grid Lines
Numbered lines that divide the grid
Grid Tracks
Space between two adjacent grid lines
Grid Cells
Single unit (intersection of row and column)
Grid Areas
(2×2)
Rectangular space spanning multiple cells
Grid Terminology
| Property | Values | Description |
|---|---|---|
Grid Lines | 1, 2, 3, 4... | Numbered dividing lines (vertical and horizontal) |
Grid Tracks | Rows, Columns | Space between two adjacent grid lines |
Grid Cells | Individual units | Single space at row/column intersection |
Grid Areas | Named regions | Rectangular space spanning multiple cells |
grid-template-columns
The grid-template-columns property defines the width of columns in the grid.
/* Fixed width columns */
.container {
display: grid;
grid-template-columns: 200px 300px 200px; /* 3 columns */
}
/* Fractional units (fr) - flexible */
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
grid-template-columns: 1fr 2fr 1fr; /* Middle column twice as wide */
}
/* repeat() function */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
grid-template-columns: repeat(4, 200px); /* 4 columns of 200px */
}
/* Mixed units */
.container {
display: grid;
grid-template-columns: 200px 1fr 200px; /* Fixed, flexible, fixed */
grid-template-columns: 100px 2fr 1fr; /* Fixed + flexible */
}
/* auto keyword */
.container {
display: grid;
grid-template-columns: auto 1fr auto; /* Size to content */
}Try different grid-template-columns values
Experiment with CSS Grid properties
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
gap: 16px;
}grid-template-columns Examples
Understanding fr Units
fr (fractional unit) represents a fraction of the available space in the grid container.
grid-template-columns: 1fr 1fr 1fr
Each column gets 1/3 of available space (equal widths)
grid-template-columns: 1fr 2fr 1fr
Total: 4fr. First gets 1/4, middle gets 2/4 (50%), last gets 1/4
grid-template-columns: 200px 1fr 1fr
First column: 200px fixed. Remaining space split equally between last two
📏 fr Unit Advantages:
The fr unit is better than percentages for grid columns because it accounts for gaps automatically. With 1fr 1fr 1fr and gap: 20px, columns remain equal. With 33.33% 33.33% 33.33% and gaps, columns overflow!
grid-template-rows
The grid-template-rows property defines the height of rows in the grid.
/* Fixed height rows */
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 200px 100px; /* 3 rows */
}
/* Flexible rows with fr */
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 2fr; /* First row 1/3, second row 2/3 */
}
/* repeat() for rows */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 150px); /* 3 rows of 150px */
}
/* auto keyword - size to content */
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr auto; /* Header, content, footer */
}
/* Mixed units */
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 1fr 80px; /* Fixed, flexible, fixed */
}grid-template-rows Examples
gap Property
The gap property (formerly grid-gap) creates space between grid items.
/* Equal gap for rows and columns */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px; /* 20px gap everywhere */
}
/* Separate row and column gaps */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 30px; /* Vertical space */
column-gap: 20px; /* Horizontal space */
}
/* Shorthand: row-gap column-gap */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px 20px; /* 30px rows, 20px columns */
}gap Property Examples
repeat() Function
The repeat() function provides a concise way to define repetitive patterns in grid templates.
/* Basic repeat */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Same as: 1fr 1fr 1fr */
grid-template-columns: repeat(4, 200px); /* Same as: 200px 200px 200px 200px */
}
/* Repeat with multiple values */
.container {
display: grid;
grid-template-columns: repeat(2, 1fr 2fr); /* Same as: 1fr 2fr 1fr 2fr */
}
/* Mixed with non-repeated values */
.container {
display: grid;
grid-template-columns: 200px repeat(3, 1fr) 200px;
/* Same as: 200px 1fr 1fr 1fr 200px */
}
/* For rows */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 150px);
}repeat() Function Examples
Practical Grid Layouts
Basic Page Layout
Basic Page Layout
Image Gallery
Image Gallery Grid
Key Takeaways
- display: grid creates a grid container; direct children become grid items
- Two-dimensional: Grid controls rows AND columns simultaneously
- grid-template-columns: Defines column widths
- grid-template-rows: Defines row heights
- fr unit: Fractional unit representing available space
- repeat(): Concise way to define repetitive patterns
- gap: Space between grid items (replaces grid-gap)
- auto: Size based on content
- Grid lines are numbered starting from 1
- Grid tracks are spaces between lines (rows/columns)
- Grid cells are single units at row/column intersections
- Use Grid for page layouts, Flexbox for component internals
What's Next?
Now that you understand Grid basics, you're ready to learn about Grid Item Placement. In the next lesson, we'll explore how to position items precisely using grid lines, spanning across multiple cells, using grid-column and grid-row properties, and creating complex layouts with grid-area. You'll learn how to place items exactly where you want them in the grid.
Grid basics give you the foundation—creating grids with rows and columns. But the real power comes from precise item placement and responsive features, which we'll cover next. You're building the skills to create sophisticated layouts that were nearly impossible before Grid!