Two-dimensional layout with Grid

What you will build

Create a card grid whose columns adapt automatically.

Understand the idea first

Grid controls rows and columns.

Build it step by step

.lesson-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.25rem;
}
.featured {
  grid-column: 1 / -1;
}

1. Make the parent a grid without changing content order.
2. Start with two columns, then use auto-fit/minmax.
3. Test at 320, 768, and 1280px.
4. Span only a genuinely featured card.

Read the important lines

• Grid controls rows and columns.
• Minmax protects a usable minimum and fr distributes space.
• Visual spanning must not change source order.

Common mistakes and what to check

Practice without copying

Build five cards that become three, two, then one column without three repetitive media queries.

Completion check

• I produced the required visible result
• I can explain the input, processing, and output
• I tested normal, edge, and failure cases