{"id":6323,"date":"2025-06-25T18:04:06","date_gmt":"2025-06-25T23:04:06","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=6323"},"modified":"2025-06-25T18:04:07","modified_gmt":"2025-06-25T23:04:07","slug":"quantity-query-carousel","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/quantity-query-carousel\/","title":{"rendered":"Quantity Query Carousel"},"content":{"rendered":"\n

The concept of a quantity query<\/strong> is really neat. Coined by Heydon<\/a> back in 2015, the idea is that you apply different styles depending on how many siblings there are. They was a way to do it back then<\/a>, but it’s gotten much easier thanks to :has()<\/code><\/a>, which not only makes the detection easier but gives us access to the parent element where we likely want it.<\/p>\n\n\n\n

For instance:<\/p>\n\n\n

.grid<\/span> {\n  display<\/span>: grid;\n\n  &:has(:nth-child(2)) {\n    \/* Has at least 2 elements *\/<\/span>\n    grid-template-columns<\/span>: 1<\/span>fr 1<\/span>fr;\n  }\n \n  \/* Use a :not() to do reverse logic *\/<\/span>\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
What if we kept going with the idea where we…<\/p>\n\n\n\n
    \n
  • If there is 1 element, let it be full-width<\/li>\n\n\n\n
  • If there are 2 elements, set them side-by-side<\/li>\n\n\n\n
  • If there are 3 elements, the first two are side-by-side, then the last is full-width<\/li>\n\n\n\n
  • If there are 4 elements, then it’s a 2\u00d72 grid<\/li>\n<\/ul>\n\n\n\n
    Then…<\/p>\n\n\n\n
      \n
    • If there are 5+ elements, woah there<\/em>, let’s just make it a carousel.<\/li>\n<\/ul>\n\n\n\n
      I heard Ahmad Shadeed mention this idea on stage at CSS Day and I had to try it myself. Good news is that it works, particularly if you can stomach the idea of a “carousel” just being “horizontal overflow with some scroll snapping” in Firefox\/Safari for now. Of course you’d be free to make your own fallback as needed.<\/p>\n\n\n\n
      Here’s the whole gang:<\/p>\n\n\n\n