CSS复杂网格自动布局

Question

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

我的想法是使用CSS网格，但是有没有一种以图像上显示的方式使用它的方法？我在想某种：nth-​​child的东西？ “部分”的数量（在这种情况下，每个高4格）总是连续三行，但行数未知。

我想出了这个，但是它把第四部分放在＃1上；并且不适用于未知数目的节/行。

.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

提出了以下解决方案，该解决方案适用于3列和任意数量的行。请看一看。我无法正确获取数字，但是它们是自动生成的，布局按您的需要。

.container > div {
  border: 2px solid black;
  padding: 2em;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(auto, 1fr));
  grid-template-rows: repeat(auto, 1fr);
  counter-reset: row;
}

.container > div:nth-child(3n+1) {
  grid-column: 1;
}

.container > div:nth-child(3n+1)::after {
  counter-increment: row;
  content: counter(row);
}

.container > div:nth-child(3n+2) {
  grid-column: 2;
}

.container > div:nth-child(3n+2)::after {
  counter-increment: row ;
  content: counter(row);
}

.container > div:nth-child(3n+3) {
  grid-column: 3;
}

.container > div:nth-child(3n+3)::after {
  counter-increment: row ;
  content: counter(row);
}

<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>

Answer 2

您可以尝试以下操作：

.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>