Question

我正在尝试构建一个可变宽度（基于视口大小）的网格，其中包含项目，数量可变。网格还可以包含占位符项，其中不存在实际项目。

我做了example试图说明我想要完成的事情。

网格还应满足以下条件：

“row”应始终填充占位符项（如果适合）。
不应该只有包含占位符项的行

我的解决方案存在一个问题，例如在350px：具有1个项目的网格，具有2个项目的网格和具有3个项目的网格具有仅具有一个占位符的额外行。应该没有额外的行和占位符。只有第一行应该是可见的。具有4个项目的网格也缺少第二行中的两个占位符。

也许我可以使用（css）表？我认为更改色谱柱/细胞计数可能存在问题。

没有JS，首选纯CSS解决方案。

.grid {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
background: yellow;
width: 500px;
margin-bottom: 20px;
}

.grid-item {
width: 100px;
height: 100px;
background: green;
margin: 5px;
}

.grid-placeholder {
width: 100px;
height: 100px;
background: grey;
margin: 5px;
}

.grid-placeholder:nth-child(n+5) {
display: none;
}

<script
  src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
  integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc="
  crossorigin="anonymous"></script>

<div class="gridControl">
<button id="changeGridWidth">change grid witdh</button> (now <span id="gridWitdh">500</span>px)
</div>
<br>
grid with 1 item
<div class="grid">
<div class="grid-item">
	1
</div>
<div class="grid-placeholder"></div>
<div class="grid-placeholder"></div>
<div class="grid-placeholder"></div>
</div>
grid with 2 items
<div class="grid">
<div class="grid-item">
	1
</div>
<div class="grid-item">
	2
</div>
<div class="grid-placeholder"></div>
<div class="grid-placeholder"></div>
<div class="grid-placeholder"></div>
</div>
grid with 3 items
<div class="grid">
<div class="grid-item">
	1
</div>
<div class="grid-item">
	2
</div>
<div class="grid-item">
	3
</div>
<div class="grid-placeholder"></div>
<div class="grid-placeholder"></div>
<div class="grid-placeholder"></div>
</div>
grid with 4 items
<div class="grid">
<div class="grid-item">
	1
</div>
<div class="grid-item">
	2
</div>
<div class="grid-item">
	3
</div>
<div class="grid-item">
	4
</div>
<div class="grid-placeholder"></div>
<div class="grid-placeholder"></div>
<div class="grid-placeholder"></div>
</div>

string.Split(',')

具有可变项，可变宽度和占位符项的CSS网格

0 个答案: