如何使CSS网格列默认跨越12列-解网

问：

是否可以编辑我的类，以便默认情况下编写此类将跨越 12 个？.grid

<div class="grid">
    <div>col</div> <!-- I want this to span-12 by default -->
</div>

这是我的班级：.grid

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

我知道如何手动执行此操作，但是是否可以修改我的以使其隐含 12 个相等的列？.grid

<div class="grid">
    <div style="grid-column:auto / span 12">col</div>
    <div style="grid-column:1 / -1">col</div>
</div>

我已经盯着 grid-auto-columns 看了一个小时了，尝试了一堆不同的东西，但还没有运气。

css css -网格

评论

0赞 Temani Afif 12/29/2021

是否可以修改我的 .grid 以使其隐式？-->不，你不能

0赞 Jeff 12/29/2021

谢谢。.grid > * { grid-column: 1 / -1 }

0赞 Temani Afif 12/29/2021

^ 你这样做不是在编辑“.grid”

0赞 Ben Souchet 12/29/2021

看完你的帖子后，我很困惑，在网格内你只想要一个子，但想要 12 列？这是否与项目放置有关，您想在网格中存储 1 到 12 个子 div 之间？div

0赞 Jeff 12/29/2021

@BenSouchet 默认情况下，我希望容器的所有新子项跨越 12 列。我认为如果没有定位黑客是不可能的，我在我的代码中强烈反对这一点。我的网格需要 12 个显式列，因此我必须为容器外部的某个位置的子项指定默认跨度。.grid.grid

答：

1赞 Ben Souchet 12/29/2021 #1

根据你最后的评论，我认为你正在寻找这样的事情：

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  background-color: grey;
}
.col {
  grid-column: span 12;
}
.a {
  background-color: blue;
}
.b {
  background-color: red;
}

<div class="grid">
  <div class="col a">1</div> 
  <div class="col b">2</div>
</div>

告诉我这是否是你要找的:)

上一个：如何在不影响元素的：：before 或：：after 的情况下更改元素的字体系列？

下一个：将移动优先转换为桌面优先媒体查询，不确定我是否做对了