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
For posters, where the titles should fill the available space. Currently measuring the longest word and total length in JavaScript then setting font-size accordingly in CSS.
app.patch-work.co/posters
app.patch-work.co/posters
November 13, 2025 at 8:17 AM
For posters, where the titles should fill the available space. Currently measuring the longest word and total length in JavaScript then setting font-size accordingly in CSS.
app.patch-work.co/posters
app.patch-work.co/posters
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