We covered a lot of ground on Saturday, Sept 16 as we kicked off the 2017-2018 PACS year. CSS Grid is our topic for the next few months or so. As a relatively new CSS construct, we started at 
the beginning and reviewed a good definition from bitsofcode.
The grid is an intersecting set of horizontal and vertical grid lines that divides the grid container’s space into grid areas, into which grid items (representing the grid container’s content) can be placed.’
Looking around the room on Saturday morning, I think most of us had the same reaction as Ire Aderinokun, wrote: “Err… what? “.
We looked at the grid container, grid lines, grid columns and grid rows. Finally, we jumped into some code examples over on our CodePen page and got a better feel for what this thing is all about.
One of the foremost authorities on CSS Grid, Rachel Andrew, will be a frequent reference as we learn to use the grid. She has devoted a great deal of time into putting together one of the best online resources for learning CSS Grid. Grid By Example offers everything we will need to learn the 17 new CSS properties associated with grid. The one example we worked with for some time was a simple layout offering basic responsive functionality. Our pen on CodePen will give you a good starting point. Play with it, tweak the CSS and HTML. Don’t worry, you won’t overwrite it. Fork it to your own CodePen account and save it for your own use.
We talked a bit about support for this understanding that while IE and Edge do not support the current version of the spec, the current releases of Chrome, Firefox, Safari, and Opera all do. The graphic offers more detail. It links to the current caniuse.com page.
A number of references where mentioned, and some used but not mentioned. Here’s everything plus:
- MDN Web Docs on CSS Grid
- Grid By Example by Rachel Andrew
- Jenn Simmons excellent collection of CSS Grid learning resources
- Pre-made patterns for your webpage, from Grid By Example
- Very cool Hero Image Pattern with a helpful video
- CSS-TRICKS guideline on using CSS Grid
Next month we will dig a little deeper into the syntax of the properties and review a few shorthand methods for describing rows and columns.
Jerome brought up a question about Flexbox and CSS Grid and HTML tables. When to use one over the other? Why use one over the other?
Looks like it comes down to dimensions. Are you putting together a primarily one-dimension page/pattern, or is it better laid out as a two dimensional space. Rachel Andrew offers a good explanation as does CSS-Tricks’ Robin Rendle when discussing the question of whether or not CSS Grid replaces Flexbox.
That’s about it for now. See you in October.
Don’t’ forget to subscribe to the mailing list in the right sidebar so you can get this riveting content delivered straight to your inbox without delay.
Questions, comments, or a suggestion? Use the comment box in the footer below.
