我有一个很棒的响应式网格,就像这样:
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
这使得每个网格项至少有200像素的宽度。其中一个项目(红色的)是两倍宽,就像这样:
grid-column-end: span 2;
目前为止还不错!
现在当我调整到一个小宽度时,红色项目会强制该网格分为两列。这给了我一个奇怪的小栏,即使我指定了最小宽度为200px也是如此。看:
我真的希望红色项目能够折叠到一列,这样网格就不会破裂。
然而问题是,我不知道整个网格的宽度,因此无法使用特定视口大小触发的媒体查询。
有没有办法要么强制红色项到一列,要么以解决此问题的另一种方式定义网格列?