Day 2: Gap & Track Spanning

Daily Objective

Span grid elements across multiple columns and rows using grid line numbers.

1. Line Numbers & Spanning

Grid lines are numbered starting from 1:

.featured-item {
  grid-column: 1 / 3; /* Spans from line 1 to line 3 (2 columns wide) */
}
.sidebar-item {
  grid-row: span 2;   /* Spans 2 rows down */
}

Daily Hands-on Practice (70%)

1. Build a magazine-style grid where the first article spans 2 columns and 2 rows.
2. Play Grid Garden levels 1 through 14.