Skip to main
Video
CSS snippet with card layout demo

Subgrid for Better Card Layouts

and fallbacks for legacy browsers

Card layouts are popular on the web, rows and columns of boxes with similar content. CSS grids can help align those cards, but it’s still be hard to line-up content inside the cards – headers and footers that might need more or less room.

That’s why we need “subgrid” – coming in Firefox 71 (Dec 3) and available now in Firefox Nightly. This is a great opportunity to quickly enhance our designs for modern browsers, without losing anything in the browsers without subgrid support.

Dont wait for full browser support to start using subgrids

Recent Videos

  1. Title card from the podcast with headshots of Brad and Mia
    Video post type

    Pottery, Theater, CSS Collaboration, and the Ethics of AI

    Brad chats with Miriam Suzanne about pottery, theater, CSS, and why we shouldn’t just accept AI as the way. Miriam describes their through-line as collaborative creativity across pottery, theater, client work, and CSS standards, arguing process shapes results and that CSS is inherently collaborative with users, browsers, and devices.

    see all Video posts
  2. Video post type

    How to Use CSS Anchor Positioning TODAY

    CSS anchor positioning simplifies popovers and dropdowns, and also unlocks new creative possibilities. James joined Jason to teach and explore anchor positioning in live code.

    see all Video posts
  3. Video post type

    Smashing Hour with Miriam Suzanne

    I joined Geoff Graham for a Smashing live stream to talk about CSS, web standards, music, and more!

    see all Video posts