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.

95 Comments

Laura Kalbag August 23, 2017 Reply

The only thing I can be sure of is the need to learn this stuff properly rachelandrew.co.uk/archives/2017/…

Kingson C. Odogwu August 23, 2017 Reply

The only thing I can be sure of is the need to learn this stuff properly rachelandrew.co.uk/archives/2017/…

Matthew Choi August 23, 2017 Reply

The only thing I can be sure of is the need to learn this stuff properly rachelandrew.co.uk/archives/2017/…

Charlotte Jackson August 23, 2017 Reply

The only thing I can be sure of is the need to learn this stuff properly rachelandrew.co.uk/archives/2017/…

Roroland 🎹 August 23, 2017 Reply

The only thing I can be sure of is the need to learn this stuff properly rachelandrew.co.uk/archives/2017/…

Matthew Bull August 23, 2017 Reply

The only thing I can be sure of is the need to learn this stuff properly rachelandrew.co.uk/archives/2017/…

UniKent UX August 23, 2017 Reply

The only thing I can be sure of is the need to learn this stuff properly rachelandrew.co.uk/archives/2017/…

Elena August 23, 2017 Reply

The only thing I can be sure of is the need to learn this stuff properly rachelandrew.co.uk/archives/2017/…

Ada Rose 🏳️‍🌈✨ August 23, 2017 Reply

The only thing I can be sure of is the need to learn this stuff properly rachelandrew.co.uk/archives/2017/…

Minh Do August 23, 2017 Reply

The only thing I can be sure of is the need to learn this stuff properly rachelandrew.co.uk/archives/2017/…

Marc Carlucci 🇬🇧 August 23, 2017 Reply

The only thing I can be sure of is the need to learn this stuff properly rachelandrew.co.uk/archives/2017/…

Borislava Todorova 絆 August 23, 2017 Reply

The only thing I can be sure of is the need to learn this stuff properly rachelandrew.co.uk/archives/2017/…

Robert Thompson 😖 August 23, 2017 Reply

The only thing I can be sure of is the need to learn this stuff properly rachelandrew.co.uk/archives/2017/…

Uziel Bueno August 23, 2017 Reply

The only thing I can be sure of is the need to learn this stuff properly rachelandrew.co.uk/archives/2017/…

Catherine August 23, 2017 Reply

The only thing I can be sure of is the need to learn this stuff properly rachelandrew.co.uk/archives/2017/…

🌹so tab today🌹 August 23, 2017 Reply

The only thing I can be sure of is the need to learn this stuff properly rachelandrew.co.uk/archives/2017/…

costacode August 23, 2017 Reply

The only thing I can be sure of is the need to learn this stuff properly rachelandrew.co.uk/archives/2017/…

((Daniel Schwartz)) August 24, 2017 Reply

@SaraSoueidan rachelandrew.co.uk/archives/2017/… plus youtube.com/watch?v=tjHOLt… might help.

Monika⁉️ August 25, 2017 Reply

The only thing I can be sure of is the need to learn this stuff properly rachelandrew.co.uk/archives/2017/…

Peers Conference October 12, 2017 Reply

New book day! The New CSS Layout is the 22nd book I’ve authored/co-authored. That’s a lot of words buff.ly/2gseec0

Leave a Reply