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.

The CSS Layout Online Workshop

If you are ever baffled by floats, puzzled by collapsing margins or want to understand what is happening under the hood of a framework, this course is for you.

♡ Likes

वैभव || vaibhav LucitheR 🌈 Benito L Scott Brown Carlos Muncharaz Jonas Päckos Patricia Matt Bayliss Jae Laura Kalbag Torres UniKent UX John Adam Rasheed HJ Chen 🇺🇸 COVFEFE David Bopp Roroland 🎹 markandrevega Matthew Bull Tom Hughes Elena Ian De La Cruz Daᴎilo Vәga lm Kevin MacKenzie Ethan Stewart Roger Dan Lewis Cains Kilian Ian Mariano Brendan Rice Ladislav Suchanek ellenlynch ObserverOfBigPicture WendyD Nihar Raote Bridget Dootrix Robert Thompson 😖 Heath Cornish Franco Scarpa Andres Galante Eric Thayer Yash Gohel Igor Gavelyuk joshikeerti jrnorris fantasai Uziel Bueno Paul Howells Dean van Niekerk Sheila Buchanan Theresa Bolets Bolets Dianna Cheng Amelia Bellamy-Royds theSignalSouth Casting Call Club Hack Silicon Valley Adrian D. Alvarez ashley ChrisOnside Kirti Bhardwaj Melanie Read Juan Javier Fabrício Tavares alice canianopol Kashkin Monika ⁉️ Marwan Khalil Wilma Ahmad Shadeed Diadji Ndiaye

↺ Reposts

Laura Kalbag Kingson C. Odogwu Matthew Choi Charlotte Jackson Roroland 🎹 Matthew Bull UniKent UX Elena Ada Rose 🏳️‍🌈✨ Minh Do Marc Carlucci 🇬🇧 Borislava Todorova 絆 Robert Thompson 😖 Uziel Bueno Catherine 🌹so tab today🌹 costacode ((Daniel Schwartz)) Monika⁉️ Peers Conference

Posted a response? Enter the URL

This site uses Webmention. If you post a response to this post on your own site, and you also support Webmention I'll be notified automatically. If not you can add a link here.