Css-网格：定义网格规则时遇到问题

Question

使用 CSS 网格，我正在尝试创建如下所示的布局：

如何在不使用嵌套元素的情况下将底部（较小）元素放置在第一行之后？较小元素的数量可以是任何数量。我尝试使用 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.

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;
}

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

Css-网格：定义网格规则时遇到问题

Css-Grid: Trouble defining grid rules

html

css

grid-layout

css-grid