Saturday , January 16 2021

Faster Layouts with CSS Grid (and Subgrid!) – Mozilla Hacks – the Web developer blog, Hacker News

CSS Grid has been available in most major browsers since early 2017, and it makes web layout more powerful than ever before. But complex-looking new syntax (line-names! Grid-areas!minmax!fit-content!fr units!) and missing IE 11 support can make it scary to many developers.

Don’t let that stop you: CSS Grid has made my layout process faster and simpler, with more flexibility. We can get started with a few basics, and the fallbacks don’t have to be overwhelming:

With Subgrid, we can also start to lay out nested elements on a shared grid, great for card layouts:

as well as common form patterns:


Miriam is a co-founder at OddBird, with 15 years experience as a project manager, user-experience designer, and front-end developer. She’s a member of the Sass core team, staff writer for CSS Tricks, and creator of popular open-source tools like Susy, True, and Herman. Miriam is also a musician with Teacup Gorilla, a published novelist & playwright, and a featured speaker at conferences around the world.


More articles by Miriam Suzanne…




Brave Browser
Read More

About admin

Check Also

Notes on Type Layouts and ABIs in Rust, Hacker News

Alexis Beingessner October 9th, 2018 -- Rust Nightly 1.30.0 1 The Anatomy of a Platform 2 The Anatomy of a Type2.1 Size 2.2 Alignment 2.3 Offsets 2.4 Layout 2.5 ABI 2.6 The Layouts/ABIs of Builtins 2.7 Specifying Layouts and ABIs 3 Extended Random Notes3.1 The C Integer Hierarchy 3.2 Endianness 3.3 Segmented Architectures 3.4 Calling…

Leave a Reply

Your email address will not be published. Required fields are marked *