Search
You want minmax(10px, 1fr) not 1fr
22.1.2021
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));
}
Why? In …
The post You want minmax(10px, 1fr)...
Beyond Media Queries: Using Newer HTML & CSS Features for Responsive Designs
4.9.2020
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 HTML and CSS) we have at the ready, from responsive...
Just another +1 for subgrid
19.6.2020
I’d say 85% of my grid usage is in one of these two categories…
I just need some pretty basic (probably equal width) columns that ends up being something like like grid-template-columns: repeat(3, minmax(0, 1fr)); to be safe.
Actually doing some real layout where five minutes in...
Equal Width Columns in CSS Grid are Kinda Weird
14.5.2020
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 that, like grid-template-columns:...
Intrinsically Responsive CSS Grid with minmax() and min()
31.7.2019
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 will stretch a little, until there is enough room...
A responsive grid layout with no media queries
9.5.2019
Andy Bell made a really cool demo that shows us how to create a responsive grid layout without any media queries at all. It happens to look like this when you change the size of the browser window:
I think this is a wonderful layout technique that’s just 6 lines (!) of CSS.
.auto-grid...