An example that I use in some of my presentations about Grid is a recreation of a fairly common, yet fragile pattern. A block of images and text used as navigation to stories or content on a site. With current methods to create these blocks we have to set the heights of elements - and we all know that setting the height of things on the web doesn’t tend to end well. As soon as more text gets added than we expected, or the text is larger than expected it can all fall apart.
CSS Grid Layout however can help us create these blocks in a way that works with the real world of content on the web. In the video I’m highlighting today I demonstrate how.
You can also find the code on CodePen.
What is this?
I’m sharing some tips to help you learn Grid Layout from the 1st of December until Christmas. Edited highlights from the things on this site and that I’ve posted elsewhere. Follow along!
If you find this style of learning useful then you might enjoy my online CSS Layout Workshop. I’m also available for in-house training, workshops and consultancy or conference speaking.