html - nth-child 具有不同宽度的 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; }

revised codepen (CSS 编译)

.container {
   display: grid;
   grid-template-columns: repeat(auto-fit, 100px);
   justify-content: center;
   grid-gap: 30px;
   background-color: #ddd;
}

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

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