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

Question

是否可以编辑我的 .grid class 以便在默认情况下编写此内容跨越 12？

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

这是我的 .grid class:

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

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

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

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

Answer 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>

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

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

How to make CSS Grid columns span 12 columns by default

css

css-grid