CSS Grid

CSS Grid

Grid makes two-dimensional layouts easy. Apply display: grid to the container:

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

fr — "fraction" unit; 1fr 2fr 1fr = 25%, 50%, 25%

repeat() shorthand:

grid-template-columns: repeat(4, 1fr);     /* 4 equal columns */
grid-template-columns: 200px repeat(3, 1fr); /* fixed + fluid */

Spanning multiple cells:

.wide { grid-column: span 2; }     /* spans 2 columns */
.tall { grid-row: span 3; }        /* spans 3 rows */
.hero { grid-column: 1 / -1; }    /* full width */

Your Task

Create a 3-column grid with gap and at least one item that spans 2 columns.