Evan Minto avatar Evan Minto

Intrinsically Responsive CSS Grid with minmax() and min()

Screenshot of “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.


  1. screenshot of Layout & Grid in Design Systems

    Brad Frost avatar Brad Frost

    Layout & Grid in Design Systems

    This interdisciplinary disconnect around grid’s mental model affects how teams execute grid. In a broken, unidirectional, “developer handoff” process, design comps are treated as sacrosanct, and developers see that 12-column semi-transparent pink guideline as a hard requirement that must implemented exactly as articulated by the static design tool. This is how a “how to do a 12-column grid in HTML/CSS?” Google search ultimately led to massive success for tools like Bootstrap. Despite the introduction of many new CSS technologies and layout techniques over many years, this antiquated 12-column mental model still dominates a lot of conversations around layout and grid.

  2. screenshot of gridless.design

    Donnie D'Amato avatar Donnie D'Amato

    gridless.design

    The web is good at these things, just not in the ways that designers have been accustomed to working. We'll take a look at how we got here and how we might change our perspective. Let's think outside of the grid and allow other guidelines to provide a comprehensive layout.