A very good time to understand CSS layout

I’ve been building a set of common UI patterns for my CSS Grid resource site, Grid by Example. These use CSS Grid Layout but include legacy layout in order that older browsers get some layout – even if not the full design that is implemented with Grid.

Something that is apparent when doing this is how little we actually need to override. When items become grid items, much of their previous behaviour is removed. A floated, display: inline-block, display: table, or flex item all become grid items and lose the behaviour that comes with these layout types. This is as defined in the specification, and you can see some examples in this cheatsheet.

We also have Feature Queries. These help us out in the instances where we do need to actually fork our code, do one thing for grid and another for other browsers. By wrapping grid code in a Feature Query we ensure that it cannot be run by those older browsers. I find that the majority of CSS inside feature queries is resetting widths used to make legacy methods act like they were using a grid.

To be able to take advantage of the things grid enables, that simply are not possible with older layout methods, you need to be able to bridge the gap between supporting and non-supporting browsers. Doing so in a way that creates a good experience for all users. You need to understand how the cascade allows you to overwrite one property with another. You need to know how floats work, why a ‘clearfix’ does what it does. You need to learn what a Block Formatting Context is, and when creating one is useful. Becoming someone who understands CSS, rather than someone who just uses CSS, will give you a huge advantage in your work.

It is for this reason that my upcoming book for A Book Apart will explain these layout methods alongside all the new shiny. Really explain them, and why they exist. I also spend time in my CSS Layout Workshop detailing each method, what it is designed for and how we have been using for layout. If you don’t want to give me money to explain these things to you, you can find information about CSS Layout in several places. I’d recommend the MDN CSS documentation as an excellent place to start.

However you learn, do learn. As I pointed out at An Event Apart Boston, the methods we have been trying to use for layout aren’t going away. You will still use them as part of the whole new layout system we now have for the web. They are also key in being able to provide elegant fallbacks for your grid and flexbox based designs. By learning, you won’t be waiting around for your framework of choice to implement grid-based grid that includes fallbacks, or for me to create more patterns. You will be able to do that for yourself in a way that suits your audience, rather than outsourcing those decisions to someone else.