Change Grid Layout Using Quantity Queries
Explore how to use CSS quantity queries with the :has() selector to dynamically change grid layouts based on the number of child elements. Understand how to create adaptive image grids that adjust columns, rows, and item spans for responsive design.
We'll cover the following...
We'll cover the following...
The trick of using :nth-child in the previous hero example is known as a quantity query. First developed by Heydon Pickering way before :has() existed, quantity queries originally leveraged :nth-last-child as a bit of a hack to count and style precise numbers of elements.
Using :has(), we can style based on quantities of child elements in a few different ways:
ul:has(> :nth-child(2))selects theulif it has two or more children.ul:has(>...