Grid makes page layouts that used to need hacks into a few lines.
Direct answer
CSS Grid lays out items in rows and columns. Set display: grid, define columns with grid-template-columns, add spacing with gap and let items flow in. The fr unit shares remaining space in proportions.
Basic grid
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}
<div class="grid">
<div>1</div><div>2</div><div>3</div>
<div>4</div><div>5</div><div>6</div>
</div>
Responsive cards without media queries
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
}
Placing items
.hero { grid-column: 1 / -1; } /* span all columns */
Page layout example
.page {
display: grid;
grid-template-columns: 220px 1fr;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
Where Teyro fits
Teyro's HTML & CSS for Beginners course turns this into short lessons you can play in a few minutes a day. It has 100 lessons, and you can start free.
The bottom line
Grid for page and card layouts, Flexbox for rows of items. Learn both.
