Explain CSS code

What this CSS sample shows

grid

repeat(auto-fill, minmax(220px, 1fr)) makes as many columns at least 220px wide as fit, then shares out the leftover space. A 960px container gets 4 columns of 228px, and one narrower than 456px gets a single column, with no media query.

flexbox

Each .card is a flex column, and margin-top: auto on its .buy button takes all the free space above it. The grid stretches the cards in a row to one height, so the buttons in that row line up along the bottom, however long the text above them.

custom properties

.card.sale sets --accent, and the button inside inherits it, so a sale card's button is red. Other cards don't set --accent, so var(--accent, #2563eb) falls back to blue.

the cascade

Inside a card, .card .buy beats the .buy rule even though .buy comes later, because two classes are more specific than one. Source order only decides between equally specific selectors: a later .card .buy { background: gray; } would win.

Good to know

• A .buy button outside any card matches only the last rule, so it is gray and has no auto margin.
• gap: 16px adds space between the cards only, never around the outside of the grid.
• With auto-fit in place of auto-fill, empty columns collapse: two cards in a 960px container stretch to 472px each, where auto-fill keeps them at 228px.
• Items in a flex column stretch across by default, so each .buy button fills its card's width. Add align-self: start to the button to keep it its natural size.
• margin-top: auto pushes only because .card is a flex container. Make .card a plain block and it computes to 0, and the buttons no longer line up.

Watch out: The fallback in var(--accent, #2563eb) is used only when --accent isn't set at all. A card that sets --accent: 12px gets a button with no background: not red, not blue and not the gray from .buy, because the browser can't tell the value is wrong until it uses it.