Grid Layout. Catching up with CSS
Just a few years ago, one could not use CSS Grid or Flexbox in any serious public website.. That’s all changed, and opened up a world of flexibility. Let’s see how CSS Grid changes the game.
It's still shocking to me how quickly the adoption of Flexbox and CSS Grid were adopted by all the major browsers. Here we are some three years later and no one blinks an eye about relying on a flexible and stable grid system. No more float-based grids! If you aren't a developer, it's sort of like having a slice of cake, and then having another slice of cake. It feels like I deserve it.
There are a lot of aspects surrounding the technical parts of this new adventure, but my feeling is that the bottom line solves a long-standing problem. Order of markup. That seems simple enough, but if you are going through a site via a screen reader, logical page flow becomes painfully clear. Which markup comes first that sidebar, or the main content? What if that main content starts with a box that's out of the normal visual flow of markup specified by the design? Are you going to rush to position:absolute; to solve that problem (thereby introducing more problems)? No! While I've got you here, Do not use the !important rule. Period. Just don't use it. On anything. You should not have to use it, and if you do you are probably doing it WRONG.
Ahem. Ok, now back to the CSS Grid. We can put things on a grid visually that might not match the flow of markup as it would have been in the past. This opens up a lot of possibilities for changeable or flexible layouts and I do mean layouts, as flowing content seems better handled by Flexbox trickery. CSS Grid seems, as I understand so far, good for wider-scoped layout, or simply for things like galleries that need quick, solid partitioning. See my overland galleries for basic gallery grid layout and how it's handled at different breakpoints.
Enough hyperbole. Here's an example of a simple layout scheme change. Note in this example the HTML markup never changes.
