CSS Grid misadventure, but it is not the fault of the garden, but of what gnaws outside the garden itself. Or rather the horror itself. At least during my grid garden quest, I was able to tend to a garden.
This was not about placing items, or testing the boundaries of the grid. It is about only accepting a rigid answer, or else you cannot pass a level.
I passed the first levels, went back to projects, debugging, wishing I had a place where I could slam my device into the wall, and spend time properly to this, and more. In between, it was also going back to the lessons. Once I got back, it was just grinding until the very last level.
//##1 Percentages are part of it.
A viewport, trying to make it change, getting the right syntax. The fractional unit fixes this- fr distributes the grid container's available space dynamically, after fixed tracks have been resolved.
An example would be:
grid-template-columns: 75px 3fr 2fr
Just explicitly track math.
//##2 fr itself
It matters the distinction; the fractional unit is a proportional allocation of leftover space.
/Fixed.tracks consume their declared size first.
/Fractional.tracks divide what remains according to their ratios.
/The container's inner dimensions determine the final result.
This is why fr works for adaptive layouts, and why absolute sizing locks you into brittle, view port-specific behavior. That is it.
//##3/It became two axes.
Separate grid-template-rows and grid template-columns declarations are valid. They are also unnecessarily verbose. The grid-templrate shorthand defines both axes in one slash-separated declaration: rows/columns.
grid-template: 1fr 50px 20% 1fr;
The engine compiles both axes immediately:
-Row axis: a flexible primary track (1fr) plus a static 50px, footer boundary.
-Column axis: a 20% structural margin on the left, with the remaining 80% as 1fr for primary content flow.
If performing all levels right, the entire 2S coordinate system is displayed, the garden is cleared full of carrots, and you get congratulated...Too bad that none of that food is real.
Anyway, CSS layout is all about figuring out the right structure.
Another of The games that The Odin Project provides, and is meant to be torn open.
(To be shared the screenshot when possible)
Top comments (0)