Lesson 2 of 5

CSS Grid: think in grids

CSS Grid arranges elements in rows AND columns. You turn on display: grid on the container.

grid-template-columns defines the columns: repeat(3, 1fr) creates three equal-width columns, and gap adds space between them.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

🎯 Your goal

A <div class="grid"> holds four cards. In CSS, set .grid to display: grid with three equal columns: grid-template-columns: repeat(3, 1fr).

PRO lesson

This advanced chapter is part of CodeAge PRO. Unlock it to keep your adventure going.