Hexagons and Beyond: Flexible, Responsive Grid Patterns, Sans Media Queries (20

A little while back, Chris shared this nice hexagonal grid. And true to its name, it’s using —wait for it — CSS Grid to form that layout. It’s a neat trick! Combining grid columns, grid gaps, and creative clipping churns out the final result. A similar thing could be accomplished with flexbox, too. But I’m here to resurrect our old friend float to create the same sort of complex and responsive layout — but with less complexity and without a single media query. I know, it’s hard to believe. So let’s start with a working demo: CodePen Embed Fallback This is a fully responsive hexagon grid made without media queries, JavaScript, or a ton of hacky CSS. Resize the demo screen and see the magic. In addition to being responsive, the grid also scales. For example, we can chuck more hexagons in there by adding more divs, and control both the sizing and spacing using CSS variables. Cool, right? And this is only one example among many grids we will build in the same manner. Making a grid of ... Read full article.