The answer to a Grid question on Twitter was once again CSS Regions. CSS Regions … so close but yet so far away. At one point the specification looked as though it would be soon implemented in a number of browsers – it made it into Safari, and in a slightly peculiar form Internet Explorer. It was being implemented in Blink, and was then pulled from Blink.
If you want to learn more about Regions, you can read this article from Sara Soueidan.
I think Regions, like Exclusions, start to make real sense once we have Grid Layout. Currently, to combine the two we need to use WebKit Nightlies as they have Grid and Regions, both using the -webkit prefix. If you want to play with the code, download a Nightly build here and see the CodePen here.
For everyone else I created a video to demonstrate.
I’m using Grid Layout to position items on a Grid, then taking a complete article and flowing it through fixed height items on the Grid. If we were just to use Grid Layout we could declare a Grid on our article and then use Grid auto placement to place the paragraphs into grid cells not occupied by images, however if a paragraph was longer it would either stretch the row or become cut off. We can’t get this effect of content flowing from one cell to another as we can with Regions.