A Comprehensive Guide to CSS Grid Using the Grid Garden Game

The author, Liu Guanyu, a senior front‑end engineer at 360, presents an in‑depth tutorial on CSS Grid by leveraging the online game Grid Garden, which consists of 28 levels where players arrange carrots in a garden using CSS Grid code.

Grid Garden offers multiple language versions; the tutorial uses the Simplified Chinese interface to demonstrate the gameplay, where a code editor on the left accepts CSS Grid declarations and a visual area on the right shows the result in real time.

Fundamental concepts are introduced first: a grid container is the parent element, grid items are its children, and grid lines (rows and columns) define the boundaries for positioning items. The layout is activated by setting display: grid; , display: inline-grid; or display: subgrid; on the container.

Levels 1‑11 focus on grid‑item properties such as grid-column-start and grid-column-end . The tutorial explains that the span keyword can replace numeric values, negative numbers count from the last line, and the shorthand grid-column: <start>/<end> is available.

Levels 12‑13 shift attention to row placement with grid-row-start and grid-row-end , highlighting how CSS Grid extends beyond the capabilities of Flexbox for two‑dimensional layouts.

Levels 14‑15 combine row and column properties, requiring flexible use of the previously introduced keywords; although CSS Grid allows naming tracks, this tutorial does not cover that feature.

Level 16 introduces the grid-area shorthand, which accepts four slash‑separated values representing grid-row-start , grid-column-start , grid-row-end , and grid-column-end (e.g., grid-area: 1 / 2 / 3 / 4 ).

Level 17 demonstrates that overlapping items do not affect the calculation algorithm, confirming that the layout remains valid.

Levels 18‑19 bring in the order property, analogous to z-index , to control stacking order of overlapping grid items, with larger values appearing on top and negative values permitted.

Levels 20‑22 cover container‑level properties grid-template-columns and grid-template-rows . The repeat() function is explained ( repeat(N, value) ) for simplifying repeated track definitions, and mixed length units (pixels, percentages, fr ) are shown.

Levels 23‑25 focus on the fr (fraction) unit. The tutorial explains how fr distributes remaining space after fixed tracks are allocated, using examples such as 1fr 2fr 3fr to split a row into six equal parts (1/6, 2/6, 3/6).

Level 26 mirrors earlier syntax for grid-template-rows , while level 27 introduces the combined grid-template shorthand ( grid-template-rows / grid-template-columns ) to define both dimensions in a single declaration.

The final boss level challenges the player to write a single line of code that solves a complex layout: grid-template: 1fr 50px/1fr 4fr; , allocating a 50 px track for a header and distributing the remaining space with a 1:4 ratio between two columns.

In conclusion, the article emphasizes that while Grid Garden covers the most common CSS Grid features, many advanced techniques remain to be explored as the specification evolves.