Answers and explanations · Build an event grid

Compare the reasoning, not just the final appearance. Other correct solutions can satisfy the same requirements.

1. Available space

There are two gaps, totaling 48px. The tracks share 720 − 48 = 672px, so each is 224px. Three gaps would incorrectly count an outer gap that Grid does not add.

2. Auto placement

With normal row-wise auto placement, the fourth article starts the second row in the first column. Reading order remains the same as source order. No nth-child positioning is required.

3. Direct children again

The section’s heading, paragraph, and event-grid div would become its grid items. The event articles remain inside their own wrapper, so the expected three-card layout would not appear. Apply the layout to .event-grid. Choose the container according to the relationship you intend to arrange.

Return to practice · Return to lesson