There are a lot of grids on the web like this:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}My message is that what they really should be is:
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(10px, 1fr));
}
Beyond using media queries and modern CSS layouts, like flexbox and grid, to create responsive websites, there are certain overlooked things we can do well to make responsive sites. In this article, we’ll dig into a number tools (revolving around …
Everything is flexible these days. If you write grid-template-columns: 200px 200px 200px;, sure, you’d have equal-width columns, but that’s a rare day. What you usually mean is three columns of equal fluid width.
We’ve got fractional units for …
The most famous line of code to have come out of CSS grid so far is:
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));Without any media queries, that will set up a grid container that has a flexible number of columns. The columns …
Another swell post by Ire Aderinokun, this time on the curious minmax() CSS function and how it works alongside the CSS Grid features that we’ve been experimenting with lately.
What’s especially great here is the examples where Ire explains how …
