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