第 n 个子级具有不同宽度的 CSS 网格布局

Question

我想要一个网格布局，其中前四个元素的宽度等于 300px，同时保持其他元素不同的宽度值（确切地说是 200px）：

基本上，我试图通过声明grid-template-columns两次来解决这个问题，如下代码所示：

  grid-template-columns: repeat(auto-fit, 200px);

  grid-template-columns:nth-child(-n+4){
       grid-template-columns: repeat(4, 300px);

但这不起作用。

网格布局是执行此操作的正确方法吗？我可以使用 Flexbox 和网格布局获得相同的结果吗？

这是 CodePen 到目前为止我的进展https://codepen.io/williamjamir/pen/GQYqrK

.container {
  width: 100%;
  margin: auto;
  background-color: #ddd;
  display: grid;
  justify-content: center;
  grid-gap: 30px;
  grid-template-columns: repeat(auto-fit, 100px);
}
@media screen and (min-width: 400px) {
  .container {
    grid-template-columns: repeat(auto-fit, 200px);
  }
  .container .container:nth-child(-n + 4) {
    grid-template-columns: repeat(4, 300px);
  }
}
.container .item {
  padding: 10px;
  color: white;
  font-family: sans-serif;
  font-size: 30px;
  background-color: orangered;
}
.container .item--1 {
  background-color: orangered;
}
.container .item--2 {
  background-color: yellowgreen;
}
.container .item--3 {
  background-color: blueviolet;
}
.container .item--4 {
  background-color: palevioletred;
}
.container .item--5 {
  background-color: royalblue;
}
.container .item--6 {
  background-color: goldenrod;
}
.container .item--7 {
  background-color: crimson;
}
.container .item--8 {
  background-color: darkslategray;
}

<div class="container">
  <div class="item item--1">A</div>
  <div class="item item--2">B</div>
  <div class="item item--3">C</div>
  <div class="item item--4">D</div>
  <div class="item item--5">E</div>
  <div class="item item--6">F</div>
  <div class="item item--7">G</div>
  <div class="item item--8">H</div>
</div>

Answer 1

repeat将/函数设置auto-fit为可以作为公分母的小宽度。

在这种情况下，100px 就可以了。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 100px);
}

然后，将前四个元素设置为跨三列。

将以下元素设置为跨越两列。

.item:nth-child(-n + 4) { grid-column: span 3; }
.item:nth-child(n + 5)  { grid-column: span 2; }

修改后的codepen（CSS编译）

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 100px);
}

.item:nth-child(-n + 4) { grid-column: span 3; }
.item:nth-child(n + 5)  { grid-column: span 2; }