CSS网格布局中针对第n个子元素使用不同宽度

Question

我希望有一个网格布局，前四个元素的宽度相等为300像素，而其余元素的宽度不同（准确地说是200像素）：

基本上，我试图通过两次声明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>

- user3142

Answer 1

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

在这种情况下，100像素就足够了。

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

- Michael Benjamin

---

我添加这些值是为了简化问题，因为实际值有点不对称（它们的共同乘数是质数）。但是我会给你答案，因为找到公共分母总归是个好方法。 - user3142

Answer 2

我不确定您需要什么布局，但似乎您需要在 .item 中使用 grid-column 并通过列跨度来扩展项目，代码中的 2 仅用于演示，您可以根据需要选择要跨越的列数。

.container {
  width: 100%;
  margin: auto;
  background-color: #ddd;
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

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

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

- dippas