CSS 复杂网格自动布局

Question

我正在制作一个布局中单元格数量未知的网站，我只想使用 CSS 制作样式。

我的想法是使用 CSS 网格，但是有没有一种方法可以按照图像上显示的方式使用它？我在想某种 :nth-child 之类的东西？ "sections" 的数量（在这种情况下每 4 个方格高）总是连续三个，但行数未知。

我想到了这个，但是它把第四部分放到了#1；它不适用于未知数量的 sections/rows.

.container {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 grid-template-rows: repeat(3, [img-start] 200px [img-end basic-start] 200px [basic-end me-start] auto [me-end why-start] auto [why-end]);
 justify-content: center;
 align-items: center;
}
.container div:nth-child(12n-11), .container div:nth-child(12n-10), .container div:nth-child(12n-9), .container div:nth-child(12n-8) {
 grid-column: 1;
}
.container div:nth-child(12n-7), .container div:nth-child(12n-6), .container div:nth-child(12n-5), .container div:nth-child(12n-4) {
 grid-column: 2;
}
.container div:nth-child(12n-3), .container div:nth-child(12n-2), .container div:nth-child(12n-1), .container div:nth-child(12n) {
 grid-column: 3;
}

.container div:nth-child(4n-3) {
 grid-row: img;
}
.container div:nth-child(4n-2) {
 grid-row: basic;
}
.container div:nth-child(4n-1) {
 grid-row: me;
}
.container div:nth-child(4n) {
 grid-row: why;
}

<div class="container">
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<div>div5</div>
<div>div6</div>
<div>div7</div>
<div>div8</div>
<div>div9</div>
<div>div10</div>
<div>div11</div>
<div>div12</div>
</div>

非常感谢。

Answer 1

您可以尝试如下操作：

.container {
  display: grid;
  grid-auto-flow:dense; /* don't leave any empty cell */
  grid-auto-rows:50px; /* 50px for each row */
  grid-auto-columns:1fr; /* 1fr for each column */
  counter-reset:num;
}
.container > * {
  grid-column:1; /* all of them in the first column by default*/
}

.container > *:nth-child(12n + 5),
.container > *:nth-child(12n + 6),
.container > *:nth-child(12n + 7),
.container > *:nth-child(12n + 8) {
  grid-column:2; /* 2nd column from 5 to 8*/
}
.container > *:nth-child(12n + 9),
.container > *:nth-child(12n + 10),
.container > *:nth-child(12n + 11),
.container > *:nth-child(12n + 12) {
  grid-column:3; /* 3rd column from 9 to 12 */
}

.container > *::before {
  content:counter(num);
  counter-increment:num;
  font-size:30px;
}

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

CSS 复杂网格自动布局

CSS complex grid auto layout

html

css

grid

grid-layout

css-grid