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: "abd" "a c d" "egh" "fgi"; 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