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 {
--auto-grid-min-size: 16rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
grid-gap: 1rem;
}What this shows us is that we don’t have to write a million media queries to change the number of columns in a grid. Andy also proves that CSS Grid can automate so much of the tedious work of styling layouts.
I’ve seen this technique used in a couple of places (and we have a few starter grid templates to boot) but Andy’s article about how it all works finally made it all sink in just how useful grid is.
Can we avoid media query in bootstrap?
Yes. Just don’t use ‘container’, ‘row’ and ‘column’ classes.
Except it doesn’t work when the container is narrower than
--auto-grid-min-size… I implement this pattern but I have to use a media query for this edge case.This is great for small projects. For big projects, you need to be able to communicatie about when the grid collapses into fewer columns exactly. You can’t say to a customer or designer “when it don’t fit no more”. They want to reason about screen sizes, if not device types.
Why did even use the variable “–auto-grid-min-size”? it’s only used once and it works fine if you substitute it for it’ value. I guess he wanted to show that he can use a variable and perhaps single out those of us who aren’t up on the latest CSS ?
In your demo, the menu change also from multiple buttons/links to one regrouping all of them (hamburger menu). I thought that part was done by the CSS grid which I found amazing. But sadly, I guess you’re talking about the content and not the header…
Did you use media query for the menu?
why auto-fill and not auto-fit?
In the case of where there are fewer items than columns,
auto-fillwill create empty columns, where asauto-fitwould only create the required number of columns.Great example. Is this solution working using Safari, Firefox, Edge and Chrome?