Intrinsically Responsive CSS Grid with minmax() and min()
I've been using a CSS Grid layout on some pages here for a while, and had issues with some of it triggering an horizontal scroll on thin viewports bellow 320 pixels.
I couldn't use CSS'
min() a while ago, because support was not good enough in browsers, but it has improved a lot, and I now have more than 95% of visitors supporting it, so I've been able to add it as a progressive enhancement, as Evan shows in this nice article.
I’m confident that this little fix for CSS Grid is just scratching the surface of the many ways that developers will use these features going forward.
By the way, I'm using Rollup and
rollup-plugin-scss, which by default relies on
node-sass, so I've been bitten by this conflict between CSS'
min() and Sass'
min(), so I'm now using the Dart Sass version from the
sass package on npm.
T E N Ǝ T
Breaking Out With CSS Grid Layout