“Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites.”
Since I began building websites in Y2K, I’ve lost count how many times the phrase “…there’s got to be a better way to do this” has passed my lips. Most times, while fighting with floats and widths of content and sidebars or just basically trying to get something beside something else without using a stupid
Well, technology sure has come a long way since slicing up images to match the table-based layout that was just created in Dreamweaver. You’d be surprised (or maybe you wouldn’t) how challenging the standard header, content, sidebar, footer layout could be to actually get right.
A proper grid is what we always wanted, no … needed to build websites with a solid, unbreakable structure. And that’s why I used it in this theme. I call this feature a “scaffold” because none of the content is laid out on this grid. Only the main structure: consisting of the
footer. As you can tell by this quote from the
W3C on the candidate recommendation itself, Grid is the perfect tool for the job:
This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid.
CSS Grid is a total game changer, IMHO. Compared to the bottomless pit of despair that is the old way, the new way of building a site structure can be done in as little as 5 lines of CSS. Of course, it always takes more than that, but not much. I mean this is really the meat of the deal:
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(3, auto);