Web Development - CSS Grid
CSS Grid
The CSS Grid Layout allows you to design web pages using a flexible grid system with rows and columns. It's ideal for creating complex layouts easily and responsively.
What is CSS Grid?
Grid is a two-dimensional layout system - it handles both rows and columns. With just a few lines of code, you can align, space, and arrange elements precisely on the page.
Example
Basic grid container:
.container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: lightgray;
padding: 10px;
}
.item {
background-color: coral;
padding: 20px;
text-align: center;
color: white;
}
Try it Yourself »
Grid Container and Grid Items
Just like Flexbox, Grid layouts start with a container and its child items:
- Grid container: the parent element with
display: grid; - Grid items: the direct children of the grid container
Grid Columns and Rows
Use grid-template-columns and grid-template-rows to define the number and size of rows and columns.
Example
Three equal columns:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
Try it Yourself »
You can use units like px, %, auto, or the flexible fr unit (fraction of space).
Grid Gaps
Use gap (or row-gap and column-gap) to control spacing between grid items.
Example
Adding space between items:
.container {
display: grid;
grid-template-columns: auto auto auto;
gap: 20px;
}
Try it Yourself »
Placing Items with Grid Lines
You can position grid items precisely using grid line numbers.
Example
Spanning multiple columns:
.item1 { grid-column: 1 / 3; } /* spans columns 1-2 */
.item2 { grid-row: 1 / 3; } /* spans rows 1-2 */
Try it Yourself »
Named Grid Areas
You can assign names to areas of the grid using grid-template-areas, and place items using grid-area.
Example
Using named areas:
.container {
display: grid;
grid-template-areas:
'header header header'
'menu main aside'
'footer footer footer';
gap: 10px;
}
.header { grid-area: header; }
.menu { grid-area: menu; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }
Try it Yourself »
This method makes it easy to rearrange your layout using only CSS.
Aligning Items in a Grid
You can align grid items within their cells using:
justify-items(horizontal alignment)align-items(vertical alignment)
Example
Centering all grid items:
.container {
display: grid;
justify-items: center;
align-items: center;
}
Try it Yourself »
Responsive Grid with minmax()
The minmax() function defines flexible columns that grow and shrink between a minimum and maximum size.
Example
Responsive grid columns:
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
Try it Yourself »
Nested Grids
You can place a grid inside another grid for complex designs.
Example
Nested grids:
.outer { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inner { display: grid; grid-template-columns: auto auto; gap: 5px; background: lightgray; }
Try it Yourself »
Best Practices
- Use
frunits for flexible layouts. - Use
grid-template-areasfor clear structure. - Combine
minmax()andauto-fitfor responsiveness. - Keep grid layouts simple and readable.
Note: Grid handles two-dimensional layouts better than Flexbox.
Next, you'll learn about CSS Responsive Design - how to make your layouts look great on all screen sizes using media queries and flexible units.
