CSS Grid
CSS Grid is a layout system for rows and columns at the same time, like a table but far more flexible.
Making a Grid
Set display: grid on a parent, then describe the columns with grid-template-columns.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
}
.grid div {
background-color: #264de4;
color: white;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid">
<div>1</div><div>2</div><div>3</div>
<div>4</div><div>5</div><div>6</div>
</div>
</body>
</html>The six items fill three columns, so the grid makes two rows by itself.
The fr Unit
fr means "fraction of the free space". 1fr 2fr makes the second column twice as wide as the first. You can mix units:
| Value | Result |
|---|---|
1fr 1fr 1fr | Three equal columns |
200px 1fr | A fixed 200px sidebar and a flexible main area |
1fr 2fr 1fr | The middle column is twice as wide |
repeat(4, 1fr) | Four equal columns (short way) |
A Responsive Card Grid
This one line makes as many 200px-or-wider columns as fit on the screen. Cards move to new rows on smaller screens, with no media query.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.courses {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
.card {
border: 1px solid #d0d7e8;
border-radius: 8px;
padding: 16px;
}
.card h3 { margin-top: 0; color: #264de4; }
</style>
</head>
<body>
<div class="courses">
<div class="card"><h3>Web Development</h3><p>HTML, CSS, JavaScript</p></div>
<div class="card"><h3>Graphic Design</h3><p>Photoshop and Illustrator</p></div>
<div class="card"><h3>Python</h3><p>Programming basics</p></div>
<div class="card"><h3>Freelancing</h3><p>Find clients online</p></div>
</div>
</body>
</html>Spanning Columns and Rows
An item can take more than one cell with grid-column and grid-row.
Example
.featured {
grid-column: span 2;
}
.tall {
grid-row: span 2;
}You can also use line numbers. Grid lines are counted from 1, so grid-column: 1 / 3 starts at line 1 and ends at line 3 (two columns wide). grid-column: 1 / -1 stretches across the whole row.
Named Areas
grid-template-areas lets you draw the layout with words. Each string is one row.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.page {
display: grid;
grid-template-columns: 180px 1fr;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
gap: 8px;
min-height: 300px;
}
header { grid-area: header; background: #c7d2fe; padding: 10px; }
aside { grid-area: sidebar; background: #fde68a; padding: 10px; }
main { grid-area: main; background: #bbf7d0; padding: 10px; }
footer { grid-area: footer; background: #e5e7eb; padding: 10px; }
</style>
</head>
<body>
<div class="page">
<header>Header</header>
<aside>Sidebar</aside>
<main>Main content</main>
<footer>Footer</footer>
</div>
</body>
</html>Grid or Flexbox?
| Use Grid when | Use Flexbox when |
|---|---|
| You plan rows and columns together | You line items up in one direction |
| You build a page layout or a gallery | You build a menu, a toolbar or a button group |
| Items must line up in both directions | Items can have different sizes |
You can mix them. A page layout made with Grid can hold cards whose inside is arranged with Flexbox.
Exercise
Exercise
What does grid-template-columns: 1fr 2fr; create?