CSS Grid: No Nonsense Layouts

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.

One of the main challenges I encounter while using CSS Grid is of the nature of responsive design. I do not know if this problem is due to an immature understanding of CSS Grid, or more of a general setback for all parties involved.

As you try to adapt your website to smaller and smaller screens, font sizes become a problem, regardless of the units you put in use.

The reason why is that as the grid items' dimensions change, text that it occupies overflow, or for that matter, leaves a noticeable space which has to be repaired.

In the light of that, I resort to certain techniques such as to increase the font size when the text of the grid item fails to occupy semi-subjective required space for it to be not considered 'awkward', as the unused space is pushing down the next content even further than one would prefer.

This concludes with an unnatural amount of media queries, created, at certain breakpoints, especially for font sizes.

I am open to any feedback on this.

Great article, the examples really demonstrate the power of grids. I wish I could use CSS Grid at work but my work requires ie11. Does anyone know of a way to use CSS grid with ie11? I understand some features are supported but its very bare and not reliable.

Lost me at grid lines. Maybe add some overlay actual lines to clearify?