Drag the size sliders, or type exact numbers. Fixed px gives every card the same width; minmax() lets the track stretch, so the cards absorb the leftover instead of leaving a gutter. Every card below is exactly that size, laid out with the gap you choose. Text sits in a translucent scrim over the artwork instead of in a white block under it, so the card is all image. The page behind the grid is kept far from both the artwork and the scrim, so every card edge is visible and you can judge the size, not just the picture.
Copyright 2026 Tero Karvinen TeroKarvinen.com
Sizes are CSS pixels — a 300 × 400 px card is 600 × 800 device pixels on a 2× screen, so feed it an image at least that big. Shop copy and prices are sample data — a fictional vintage toy-robot shop. Leftover is the unused strip at the right edge of the row: what your grid wastes at this container width. Full means the whole window, edge to edge, ignoring the 1600 px column the controls sit in. Container widths wider than your screen scroll sideways rather than being silently clamped, so the numbers stay true. An overlay this dark needs artwork that can carry it; over a pale photo the scrim is the only thing keeping the title readable, which is the tradeoff the old Netflix tiles made too. One file, no external fonts, scripts or images, so it works offline.