Day 1: Grid Containers, Columns & fr Unit

Daily Objective

Create two-dimensional layouts using CSS Grid, column templates, and the fractional (fr) unit.

1. Two-Dimensional Layouts

While Flexbox excels at single rows or columns, CSS Grid manages both rows and columns simultaneously:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  grid-template-rows: auto;
}

Daily Hands-on Practice (70%)

1. Create a 3x3 grid container with 9 numbered items.
2. Experiment with mixed track sizes like grid-template-columns: 200px 1fr 2fr;.