Johannes Mutter
@johannesmutter.bsky.social
Design-Engineer
Building a simpler, more beautiful and cosy web.
🔮: Generative UIs, Tools for Thought, Browsers as OS, Infinite Canvas
Building a simpler, more beautiful and cosy web.
🔮: Generative UIs, Tools for Thought, Browsers as OS, Infinite Canvas
Masonry layout in pure CSS?
The trick is to use grid-auto-rows: 20px on the container, then set each card’s height using grid-row-end: span 𝒳. For 𝒳 we calculate how many ‘rows’ tall a card should be based on the column width and aspect ratio. With tan() we get a unitless value
The trick is to use grid-auto-rows: 20px on the container, then set each card’s height using grid-row-end: span 𝒳. For 𝒳 we calculate how many ‘rows’ tall a card should be based on the column width and aspect ratio. With tan() we get a unitless value
July 24, 2025 at 7:34 PM
Masonry layout in pure CSS?
The trick is to use grid-auto-rows: 20px on the container, then set each card’s height using grid-row-end: span 𝒳. For 𝒳 we calculate how many ‘rows’ tall a card should be based on the column width and aspect ratio. With tan() we get a unitless value
The trick is to use grid-auto-rows: 20px on the container, then set each card’s height using grid-row-end: span 𝒳. For 𝒳 we calculate how many ‘rows’ tall a card should be based on the column width and aspect ratio. With tan() we get a unitless value