每行元素数量不同的 CSS 网格答案

【问题标题】：CSS grid with varying number of elements per row每行元素数量不同的 CSS 网格
【发布时间】：2021-04-06 23:51:52
【问题描述】：

简而言之；这就是我希望我的网格看起来的样子：

❌⏹️⏹️❌
⏹️⏹️⏹️⏹️
⏹️⏹️⏹️⏹️
❌⏹️⏹️(❌)

所以第二个孩子从 pos 2 开始，第三个包裹到第二行。最后一行也一样。这是在一个容器中。我曾考虑为每一行提供一个具有不同网格模板列的容器但我尽量避免这样做，因为每个框的样式都有点随机化。

有人有想法吗？我尝试将 grid-column-start 和 -end 与 nth-child 和 nth-last-child 结合使用，但这不是我所期望的。

这是一个可以玩的 Codepen：https://codepen.io/nchlsschndr/pen/NWdvjoj

【问题讨论】：

标签： css css-grid

【解决方案1】：

不可见的间隔，从网格更改为 flex 和使用顺序就可以了。通过对order 进行操作，您也可以使其具有响应性。
order on MDN

.container {
    display: flex;
    flex-wrap: wrap;
    max-width: 500px;
    margin: 0 auto;
    border-radius: 35%;
    background-color: green;
}

span.spacer {
    flex: 0 0 25%;
    max-width: 25%;
    height: 100px;
}

div.box {
    flex: 0 0 25%;
    max-width: 25%;
    height: 100px;
    margin: -3px;
    border-radius: 20%;
    background-color: darkgreen;
    border: 1px solid black;
}

.spacer:nth-of-type(1) {
    order: 1;
}

.box:nth-of-type(1) {
    order: 2;
    transform: translate(1px, 2px) rotate(1deg);
}

.box:nth-of-type(2) {
    order: 3;
    transform: translate(-2px, 0px) rotate(-5deg);
}

.spacer:nth-of-type(2) {
    order: 4;
}

.box:nth-of-type(3) {
    order: 5;
    transform: translate(4px, -4px) rotate(4deg);
}

.box:nth-of-type(4) {
    order: 6;
    transform: translate(-3px, 0px) rotate(9deg);
}

.box:nth-of-type(5) {
    order: 7;
    transform: translate(2px, 5px) rotate(-3deg);
}

.box:nth-of-type(6) {
    order: 8;
    transform: translate(2px, 4px) rotate(-1deg);
}

.box:nth-of-type(7) {
    order: 9;
    transform: translate(4px, 3px) rotate(-9deg);
}

.box:nth-of-type(8) {
    order: 10;
    transform: translate(-2px, 4px) rotate(-2deg);
}

.box:nth-of-type(9) {
    order: 11;
    transform: translate(-2px, -2px) rotate(1deg);
}

.box:nth-of-type(10) {
    order: 12;
    transform: translate(-2px, -1px) rotate(10deg);
}

.spacer:nth-of-type(3) {
    order: 13;
}

.box:nth-of-type(11) {
    order: 14;
    transform: translate(-4px, 0px) rotate(-2deg);
}

.box:nth-of-type(12) {
    order: 15;
    transform: translate(3px, -3px) rotate(-4deg);
}

.spacer:nth-of-type(4) {
    order: 16;
}

.box:nth-last-child(1) {
    background-color: red;
}

<div class="container">
    <span class="spacer"></span>
    <span class="spacer"></span>
    <span class="spacer"></span>
    <span class="spacer"></span>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

【讨论】：

【解决方案2】：

<html>
    <div id="grid">
        <div></div>
        <div class="block"></div>
        <div class="block"></div>
        <div></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div></div>
        <div class="block"></div>
        <div class="block"></div>
        <div></div>
    </div>
</html>

<style>
    #grid {
        display: grid;
        width: 200px;
        height: 200px;
        gap: 2px;
        grid-template-columns: repeat(4, minmax(0px, auto));
    }
    .block {
        background: linear-gradient(60deg, red, blue);
        border-radius: 2px;
    }
</style>

我相信这应该可以满足您的要求，即使您想避免使用网格模板列，只要每个 div 中都有一些内容，它们就会自动适应内容

【讨论】：

【解决方案3】：

简单使用

.container :first-child {
  grid-column:2; /* first one start at second row */
}
/* before will fill the top right corner*/
.container::before {
  content:"";
  grid-column:4;
  grid-row:1;
}
/* after will fill the bottom left one */
.container::after {
  content:"";
  grid-row:4;
  grid-column:1;
}

完整代码

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 500px;
  margin: 0 auto;
  border-radius: 35%;
  background-color: green;
}
.container :first-child {
  grid-column:2;
}
.container::before {
  content:"";
  grid-column:4;
  grid-row:1;
}
.container::after {
  content:"";
  grid-row:4;
  grid-column:1;
}

.box {
  height: 100px;
  margin: -3px;
  border-radius: 20%;
  background-color: darkgreen;
  border: 1px solid black;
}
.box:nth-child(1) {
  transform: translate(2px, 4px) rotate(9deg);
}
.box:nth-child(2) {
  transform: translate(3px, -1px) rotate(4deg);
}
.box:nth-child(3) {
  transform: translate(2px, -4px) rotate(-4deg);
}
.box:nth-child(4) {
  transform: translate(-4px, -2px) rotate(1deg);
}
.box:nth-child(5) {
  transform: translate(-3px, -2px) rotate(8deg);
}
.box:nth-child(6) {
  transform: translate(-2px, -2px) rotate(4deg);
}
.box:nth-child(7) {
  transform: translate(-1px, -4px) rotate(-7deg);
}
.box:nth-child(8) {
  transform: translate(2px, -2px) rotate(10deg);
}
.box:nth-child(9) {
  transform: translate(2px, -1px) rotate(-4deg);
}
.box:nth-child(10) {
  transform: translate(-1px, -2px) rotate(2deg);
}
.box:nth-child(11) {
  transform: translate(-3px, 3px) rotate(2deg);
}
.box:nth-child(12) {
  transform: translate(-4px, -2px) rotate(8deg);
}
.box:nth-child(13) {
  transform: translate(2px, 4px) rotate(4deg);
}
.box:nth-child(14) {
  transform: translate(3px, -4px) rotate(-8deg);
}
.box:nth-child(15) {
  transform: translate(-3px, 4px) rotate(-4deg);
}
.box:nth-child(16) {
  transform: translate(-4px, -4px) rotate(2deg);
}
.box:nth-last-child(1) {
  background-color: red;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

【讨论】：