CSS 复杂网格布局

Question

我正在寻找布局（下图），我希望 HTML 遵循相同的格式，因为这将拉动动态内容。

这里有 2 行，当添加更多动态内容时，这些行将重复以遵循设计。

我尝试过使用 display:grid;和显示：弹性；但目前无法正确创建它。

我在下面创建了这个，但是它适用于一行。我想知道是否有更好的解决方法，或者是否有人可以提供任何答案？

Codepen:- https://codepen.io/scottYg55/pen/VwwPqXB?&editable=true

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.wrapper>div {
  background: blue;
  border: 1px solid black;
}

.wrapper>div:nth-of-type(1) {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 3;
}

.wrapper>div:nth-of-type(4) {
  grid-column-start: 3;
  grid-row-start: 1;
  grid-row-end: 3;
  background: red;
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
</div>

Answer 1

您的模式每 9 个元素重复一次，因此您可以尝试以下您认为nth-child(9n + x) 的方法

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow:dense; /* to fill all the empty cells */
  grid-auto-rows: 50px;
}

 /* 2 rows for 1 and 4 and 7*/
.wrapper > div:nth-child(9n + 1),
.wrapper > div:nth-child(9n + 4),
.wrapper > div:nth-child(9n + 7) {
  grid-row:span 2;
  background:red;
}

/* force the 3rd element on column 2*/
.wrapper > div:nth-child(9n + 3) {
 grid-column:2;
}

/* force the 6th element on column 1*/
.wrapper > div:nth-child(9n + 6) {
 grid-column:1;
}

.wrapper>div {
  background: blue;
  border: 1px solid black;
  color:#fff;
  font-size:2em;
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
  <div>17</div>
  <div>18</div>
</div>

您还可以考虑重复每 3 个元素的模式并优化如下代码：

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow:dense; /* to fill all the empty cells */
  grid-auto-rows: 50px;
}

.wrapper > div:nth-child(3n + 1) {
  grid-row:span 2;
  background:red;
}

/* force the 3rd element on column 2*/
.wrapper > div:nth-child(9n + 3) {
 grid-column:2;
}

/* force the 6th element on column 1*/
.wrapper > div:nth-child(9n + 6) {
 grid-column:1;
}

.wrapper>div {
  background: blue;
  border: 1px solid black;
  color:#fff;
  font-size:2em;
}

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
  <div>17</div>
  <div>18</div>
</div>

Answer 2

您为什么不尝试使用网格模板区域？

请看下面的例子：

.wrapper {
  display: grid;
  grid-template-areas:
    "a b d"
    "a c d"
    "e g h"
    "f g i";
  grid-auto-rows: 100px;
}

/* AREAS */
.wrapper div:nth-child(1) {
  grid-area: a;
}

.wrapper div:nth-child(2) {
  grid-area: b;
}

.wrapper div:nth-child(3) {
  grid-area: c;
}

.wrapper div:nth-child(4) {
  grid-area: d;
}

.wrapper div:nth-child(5) {
  grid-area: e;
}

.wrapper div:nth-child(6) {
  grid-area: f;
}

.wrapper div:nth-child(7) {
  grid-area: g;
}

.wrapper div:nth-child(8) {
  grid-area: h;
}

.wrapper div:nth-child(9) {
  grid-area: i;
}

/* COLORS */
.wrapper div:nth-child(3n + 1) {
  background-color: #2a30f1;
}

.wrapper div:nth-child(3n) {
  background-color: #b40000;
}

.wrapper div:nth-child(3n + 2) {
  background-color: #640000;
}

<div class="wrapper">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
      </div>

此方法也适用于使用 autoprefixer 的 Internet Explorer 11