Profile picture of Michael Großklaus

Michael Großklaus

Doing frontend things at factorial.io and created miyagi.dev.

GitHub
github.com/mgrsskls
Mastodon
indieweb.social/@mgrsskls
RSS
/feed.xml

Built with Eleventy & hosted on Netlify.

CSS Grid tiles

Date:
Tags:

I can never remember this snippet:

display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));

This will create equally sized columns, where 20rem is the minimum width of the columns. When they would become smaller than this, the last entry in a row moves to the next row.

We use min(100%, 20rem) to avoid overflow when the container is smaller than 20rem.