Grid Intro
CSS Grid is a two-dimensional layout system. You declare a grid of rows and columns, then drop children into specific cells (or let them flow into the next available one).
Tracks, lines, and cells
Key properties
| Property | Goes on… | Purpose |
|---|---|---|
display: grid | Container | Turn the element into a grid. |
grid-template-columns | Container | Define column tracks. repeat(3, 1fr) = three equal columns. |
grid-template-rows | Container | Define row tracks. Often left to auto. |
gap | Container | Space between tracks. Replaces grid-gap. |
grid-column | Item | Which columns the item spans, e.g. 1 / 3 or span 2. |
grid-row | Item | Which rows the item spans. |
Tip: The
fr unit means "fraction of free space". 1fr 2fr gives the second column twice as much room as the first.Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.grid > div { background: #2965F1; color: #fff; padding: 24px; text-align: center; }
</style>
</head>
<body>
<div class="grid">
<div>A</div><div>B</div><div>C</div>
<div>D</div><div>E</div><div>F</div>
</div>
</body>
</html>
Try it Yourself »
Exercise
Create three equal columns with one rule.
.grid {
display: grid;
grid-template-columns:
(3, 1fr);
}
A CSS function that repeats a track pattern.
Discussion
Loading…