Css-Grid：无法定义网格规则

Question

使用CSS Grid，我正在尝试创建一个如下所示的布局：

如何在不使用嵌套元素的情况下将底部（较小）元素放在第一行之外？较小元素的数量可以是任何数量。我尝试使用grid-auto-columns: 2fr;来完成我的任务，但它不起作用。

以下是我到目前为止所尝试的内容：Codepen

main {
  display: grid;
  padding: 10px 0 10px 10px;
  grid-template: 1fr/repeat(6, 1fr);
  grid-template-areas: "a a a b b b";
  grid-auto-columns: 2fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

main .a {
  grid-area: a;
}

main .b {
  grid-area: b;
}

.cat {
  height: 150px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 20px;
  background-color: green;
  color: #fff;
}

.cat:hover {
  background-color: #004800;
}

<main>
  <div class="cat a"></div>
  <div class="cat b"></div>
  <div class="cat c"></div>
  <div class="cat d"></div>
  <div class="cat e"></div>
  <div class="cat f"></div>
  <div class="cat g"></div>
  <div class="cat h"></div>
  <div class="cat i"></div>
</main>

Answer 1

我做的第一件事是定义网格应该有多少列。看看你的图像，我有理由选择12列。

在main元素中，我添加了规则：

grid-template-columns: repeat(12, 1fr);

在.cat规则中，我添加了一些内容。默认情况下，每个块占用4/12列。

grid-column: span 4;

最后一部分是处理前两个.cat块，a和b。没问题。它们各占6/12列。

 &.a,
 &.b {
   grid-column: span 6;
 }

就是这样。这是working demo。

＆＃13;

＆＃13;

main {
  display: grid;
  padding: 10px 0 10px 10px;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.cat {
  height: 150px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 20px;
  background-color: green;
  color: #fff;
  grid-column: span 4;
}

.cat:hover {
  background-color: #004800;
}

.cat.a,
.cat.b {
  grid-column: span 6;
}

＆＃13;

<main>
  <div class="cat a"></div>
  <div class="cat b"></div>
  <div class="cat c"></div>
  <div class="cat d"></div>
  <div class="cat e"></div>
  <div class="cat f"></div>
  <div class="cat g"></div>
  <div class="cat h"></div>
  <div class="cat i"></div>
</main>

＆＃13;

＆＃13;

＆＃13;