3 ms·
The measurement units need the viewer units and auto added. I also think 'em' is useful in the grid context. I am not sure on how best the different ways of de
by Theodores 7y ago
The measurement units need the viewer units and auto added. I also think 'em' is useful in the grid context.
I am not sure on how best the different ways of defining a grid should best be told to a learning audience, which is everyone except Rachel Andrews. There are quite a few choices and sometimes too much choice is overwhelming.
I think that normal grid template columns with explicit rows is a good way to start. Then all of the other variants need to be tied in to use cases after one gets stuck.
One way this could be done is with a tutorial on CSS grid that uses CSS grid rather than older layout methods. Solving common problems in responsive design or implementing a footer that sticks to the bottom of the page could all be done in the context of the tutorial.
For instance, grid layout could be used for the pros/cons of the different measurement units, so rather than placeholder copy in codepens the examples could be practically 'recursive'.
Examples only get you so far and tend to drop you off in the deep end, if a page was a fully worked example then it could be a really useful reference for when things get tricky.
A lot of the audience for CSS grid already have stuff done with a framework, e.g. the Bootstrap used here, so a worked example could be doubly useful. Some of the extra markup on Bootstrap doesn't help with CSS Grid and there are little workarounds like 'display: contents' to surface the contents of a container block to a grid.