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) not 1fr appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.
Login to add comment
Other posts in this group

Web design veteran Andy Clarke is offering a two-hour workshop all about creating practical and creative page layouts this September 18. Register and save a few bucks with a coupon code.

How do you design block quotes and pull quotes to reflect a brand’s visual identity and help tell its story? Here’s how I do it by styling the HTML blockquote
element using borders, de


Parallax is a pattern in which different elements of a webpage move at varying speeds as the user scrolls, creating a three-dimensional, layered appearance. It once required JavaScript. Now we have

Today, I want to discuss a couple of patterns for naming color palettes that the community is using, and how I propose we can improve, so we achieve both flexibility and beauty.


I went on to figure out how make masonry work today with other browsers. I'm happy to report I've found a way — and, bonus! — that support can be provided with only 66 lines of JavaScript.
<hr