CSS Grid Layout divides a box into rows and columns. Set display: grid on the parent. That parent is the grid container. Each direct child is a grid item.
grid-template-columns sizes the column tracks. 1fr is one share of the free space, so repeat(3, 1fr) makes three equal columns. gap is the gutter between tracks. grid-column: 1 / 3 places an item from column line 1 to column line 3, which covers two columns.
Three columns have four lines: 1, 2, 3, and 4. grid-column: 1 / 3 stops at line 3, so the item fills columns 1 and 2.
A three-column grid, with one item placed by line numbers:
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.one {
grid-column: 1 / 3; /* line 1 to line 3 */
grid-row: 1;
}Ideas every CSS Grid tutorial builds on:
| Idea | Example | Remember |
|---|---|---|
| Container | display: grid | Direct children become items |
| Columns | repeat(3, 1fr) | Three equal column tracks |
| Fraction | 1fr 2fr | The second track gets twice the free space |
| Gutter | gap: 10px | Space between tracks |
| Lines | grid-column: 1 / 3 | Two columns, lines 1 through 3 |
| New rows | minmax(100px, auto) | At least 100px, taller if the content needs it |
Three grids. View Output shows the tracks the browser paints.
repeat(3, 1fr) gives each column the same share of the free space. gap separates them.
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
/* items: One, Two, Three */.wrapper the container. One, Two, and Three are the items.1fr is an equal share.grid-column: 1 / 3 covers the first two columns. The next item sits in column 3.
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.wide {
grid-column: 1 / 3;
}1fr 2fr splits the free space into three shares. The second column receives two of them.
.wrapper {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
}Lay items along one row or one column.
11 people found this page helpful