使用 minmax() 和 min() 实现内在响应式 CSS 网格
阅读评论
迄今为止,从 CSS 网格中诞生的最著名的代码行是
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
无需任何媒体查询,这将设置一个具有灵活列数的网格容器。 列会稍微拉伸,直到有足够的空间容纳另一个列,然后添加一个新的列,反之亦然。
这里唯一的弱点是 minmax()
中的第一个值(上面的 10rem 值)。 如果容器比该最小值窄,则该单列中的元素将溢出。 Evan Minto 向我们展示了使用 min()
的解决方案
grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));
浏览器支持尚未普及,但 Evan 演示了一些渐进增强技术,可以立即利用这些技术。