December 18, 2019

 

CSS Grid is the web layout standard of the future

Today I Learned that Mozilla has a great guide for comprehending CSS Grid!

If you have been a web designer/developer for any length of time you’ve surely used your fair share of float:lefts and clear-fixes to arrange content on the web, and despite the frustrations of that, you gladly accepted them for giving up the old way of table-based layout back in the pre-responsive web design days. And you probably gladly switched to the grid-based Bootstrap approach despite having to load in all that extra code, because up until now there was not a built-in layout language for the web. That all changes with CSS Grid (and Flexbox), a layout structure that is built-into CSS and widely supporting by the major web browsers. Best of all, Grid (and Flexbox) seamlessly with with older techniques so you don’t have to choose one of the other.

CSS Grid is certainly the layout tool for future web development, and it’s worth noting that it can be used hand-in-hand with Flexbox (or ‘Flexible Box Model’) which has a lot of similar features, attributes, naming conventions and so on. It’s a little confusing at first, but once you at least kinda* get the hang of it creating layouts for the web is a dream. (*I say Kinda because no one would be expected to be a repository of everything there is to know about Grid, or Flexbox, or the rest of CSS for that matter - this is one reason we have Google).

One way to distinguish Flexbox and Grid is know that Flexbox is one-directional (horizontal or vertical) and Grid is bi-directional (horizontal and/or vertical), as this article clearly explains.

CSS Tricks also has an excellent reference for Grid (based on their reference for Flexbox) that I use every time I work with Grid. And my favorite version of my favorite Browser, Firefox Developer Edition, has some amazing tools built in for visualizing and working in Web.

Labels: ,


link to this post - posted by Jonathan @ 10:44 PM -