Mozilla Hacks

Faster Layouts with CSS Grid (and Subgrid!)

By Miriam Suzanne

Posted on October 18, 2019 in CSS and Featured Article

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 IE11 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:

About Miriam Suzanne

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…

One comment

  1. Waldemar

    I’m still struggling to find a way for a grid to always fill the rows (including the last one), regardless of the number of items and without queries. Many examples use cheeky number of items like 12, which nicely divides by 1, 2, 3 and 4, so the last row is always full.
    Example: I have 9 items.
    – on mobiles: show 1 per row (easy)
    – on tablets: show 2 per row, stretch last one to the full length to fill the row
    – on laptops: show 3 per row (easy)
    – on bigger screens: first row 5, second row 4 items stretched to fill the row

    Or more advanced: stretch / span the items vertically depending on the content size (images, text).

    October 18th, 2019 at 20:27

Comments are closed for this article.