有没有办法在不使用媒体查询的情况下限制创建的列数,并将其与自动调整/填充相结合？ 例如： grid-template-columns: repeat(auto-fit,minmax(250
... . . 有没有办法在不使用媒体查询的情况下限制创建的列数,并将其与自动调整/填充相结合？
例如：
grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
创建精彩,响应迅速的布局.但想象一下,设计最多需要3列 – 即使在广泛的浏览器中也是如此.如果空间允许,它会愉快地显示4,5个更多列.
使用媒体查询,我可以指定大屏幕获取：
grid-template-columns: 1fr 1fr 1fr;
小屏幕得到：
grid-template-columns: repeat(auto-fit,1fr));
但这感觉不对.有没有办法告诉我的网格布局重复最多n次,仍然使用重复和自动适合/填充？
更新：这不是重复：How to limit the amount of columns in larger viewports with CSS Grid and auto-fill/fit?
我问如何使视口的代码也适用于较小的视口.上面提到的问题(和答案)只是我的问题的起点.
.解决方法
. 救援的CSS自定义属性(‘CSS变量’)
.grid { --repeat: auto-fit;}@media (min-width: calc(250 * 3px)) { .grid { --repeat: 3; }}.grid { display: grid; grid-template-columns: repeat(var(--repeat,auto-fit),minmax(calc(250 * 1px),1fr)); grid-gap: 8px;}.grid .item { background-color: silver; padding: 8px;} <div class="grid"> <div class="item">Lorem,ipsum.</div> <div class="item">Soluta,voluptatibus!</div> <div class="item">Reprehenderit,consequuntur.</div> <div class="item">Temporibus,veritatis!</div> <div class="item">Consequatur,voluptates.</div> <div class="item">Distinctio,adipisci.</div> <div class="item">Repellat,corrupti.</div> <div class="item">Quia,corporis.</div> <div class="item">Nobis,aut.</div> <div class="item">Dicta,officiis?</div> <div class="item">Voluptate,tempora?</div> <div class="item">Nihil,earum?</div> <div class="item">Placeat,aspernatur!</div> <div class="item">Officia,sunt?</div> <div class="item">Atque,temporibus!</div> <div class="item">Rerum,unde!</div> <div class="item">Hic,molestias!</div> <div class="item">Et,repellat!</div> <div class="item">Earum,itaque.</div> <div class="item">Doloribus,facilis.</div> <div class="item">Eius,alias!</div> <div class="item">Est,officia.</div> <div class="item">Ad,porro!</div> <div class="item">Ipsum,voluptates.</div> <div class="item">Animi,eligendi.</div> <div class="item">Tempore,hic!</div> <div class="item">Voluptatibus,illum.</div> <div class="item">Autem,cumque!</div> <div class="item">Cupiditate,minus!</div> <div class="item">Tenetur,aliquam.</div></div>
备注
提问者在他的OP中想要一个不使用媒体查询的解决方案.此解决方案确实使用媒体查询,但方式有所不同.媒体查询中唯一改变的是CSS自定义属性的值.
我们甚至可以使用：全局’自定义属性：root选择器
:root { --repeat: auto-fit;}@media (min-width: calc(250 * 3px)) { :root { --repeat: 3; }} 可以进一步在媒体查询条件本身中使用自定义属性,但不幸的是,这不起作用.
:root { --repeat: auto-fit; --max-columns: 3; --max-column-width: 250px;}/* Will not work: var is not allowed in media query condition */@media (min-width: calc(var(--max-column-width) * var(--max-columns))) { :root { --repeat: var(--max-columns); }}. . .. ...
