November’s gathering had us reviewing the featured of named CSS Grid areas. Woo hoo! Good stuff. The entire presentation can be viewed here.
The inspiration for our discussion drew heavily on a blog post by Manuel Rego Casanovas. I think that Manuel does an awesome job of clearly explaining how the grid template areas work and how we can use them for precise element placement within the web page. The shorthand options for naming areas allows for an easier re-read of the code once everything is up and running.
We reviewed a working playground on CodePen.
Much of the class was spent reviewing the code found in the CodePen example above. Take the opportunity to paly with it, create your own Codepen site. See what you can do with CSS GRID.
December is still up in the air. I really like where we’ve been going with CSS Grid. Drop a comment below if you have an idea for a topic.
A few of the resources mentioned during the SIG meeting are listed below.
- Rachel Andrews’ newest book – The New CSS Layout – is available from A Book Apart.
- David offered a Google group with a contributor offering regular updates on a variety of web design topics
- Awesome article culled from that group
And finally, Ron had an excellent question about what happens when the content is too much for the for the grid cell to contain. An article in Smashing Magazine helps clarify how to handle this. The examples aren’t all linked, but you get the idea.