Earlier in the week I walked through the css grid layout module. There was a lot to cover and as the post grew long I saved some real examples for today.
I often suggest that designing with a grid is a good idea. Developing them in html and css sometimes feels like a hack, though. Developers certainly build grids for use online and there are a variety of frameworks you can use that do the work for you. Still, wouldn’t it be nice to have some native css for creating grids?
The benefits of using a grid are easy to see, but how do you build them? The divisions of unit, field, column, gutter, and row are based on something, but what? Where exactly does this something come from? That’s what Zell wanted to know when he asked similar questions in a comment a couple of weeks ago.
For the last few weeks I’ve been digging into the concept of modularity as it relates to web design. Last week I moved from modular content creation to modular design and considered how abstracting out components and patterns could lead to flexibility, efficiency, and a consistent visual language. There was one aspect of design that I didn’t talk about and that was modularizing the space of the canvas.