Random thoughts of a digital web weaver

Content Block Layout with Dynamic Content Using CSS Grid

With the impending introduction of CSS Grid in mainstream versions of major browsers, I have been playing around with it and trying to learn how I can incorporate into current production scenarios.

One scenario is a content block grid where we have multiple blocks of content that each consist of a title, some sort of image or media, copy, and some hyperlinks. In addition to making the grid of blocks responsive (which is the easy part), the scenario calls for each of the elements within the content blocks to line up with the corresponding elements within it’s sibling content blocks on the same row.

For example, if there are 4 content blocks in a row, the copy of each of the blocks should start at the same point on the x axis of the row. While this is relatively easy when you have total control of the content and can craft it so that each element has a consistent (or at least predictable) amount of content, the challenge arises when you don’t have control of the content.

I have been playing around with the following Codepen to see if I can get things to work. I’ve been able to line up the media at the top of the content blocks and the links to the bottom, but the title and copy sections in the middle look “jagged” because the image heights are different. Instead, what I’m looking for is a layout where the titles and copy sections of each block line up with each other so that there is a more uniform look to the grid.

I’m not sure if that’s possible but I’d invite you to checkout my Codepen (currently viewable in Firefox Nightly and Chrome Canary)  to hit me up on Twitter or drop me an email with any feedback or advice you might have.



I’ve opened up an issue with this on Rachel Andrew’s CSS Grid AMA. Check it out and post any ideas you might have. Also check out the other issues on the AMA. It’s a great resource.