Grids That Adapt

Grids That Adapt: Grids That Fill the Space: repeat(), minmax() and auto-fit, Subgrid: Lining Up Cards.

Updated

  1. Grids That Fill the Space: repeat(), minmax() and auto-fit (Journeyman): One line of CSS, repeat(auto-fit, minmax(14rem, 1fr)), makes a gallery that shows one column on a phone, four on a laptop and more on a wide screen, with no media query at all.
  2. Subgrid: Lining Up Cards (Freelancer): With grid-template-rows: subgrid, cards in a row share their parent grid's rows, so every card's title, text and button line up across the row however long each card's text is.