CSS 具有固定列大小的网格,可以添加额外的列来填充容器的宽度
CSS grid with fixed column size that adds extra columns to fill width of container
我有一个宽度和结果数量各不相同的网格。
网格中的每个单元格都是 200x200 像素。
随着网格的扩展,我希望列宽保持固定并添加新列。您可以想象网格最初有 3 列,当用户扩展 window 时,一个添加第四列以使用新的 whitespace.
此网格正在呈现一组搜索结果。
- 所以我需要能够根据结果数改变行数。
- 我需要能够让列动态地填满水平 space。
- 我需要结果在移动到下一行之前先填满每一行。
这是我一直在尝试的方法,但它目前无法正常工作,因为它只呈现单个列(CSS 在 JS 中,但它只是 CSS):
ResultsGrid: {
display: grid,
gridAutoRows: 280px,
gridAutoColumns: 280px,
gap: 20px,
gridAutoFlow: row-dense,
}
Result: {
border: 1px solid #EAEAEA,
}
期望的结果
这是我的实现:
auto-fit
参数与repeat
CSS函数
.grid-item {
border: 2px solid red;
background: orange;
color: red;
padding: 10px;
border-radius: 8px;
}
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, 200px);
grid-auto-rows: 200px;
gap: 6px;
}
<div class="wrapper">
<div class="grid-item">html</div>
<div class="grid-item">html</div>
<div class="grid-item">html</div>
<div class="grid-item">html</div>
<div class="grid-item">html</div>
<div class="grid-item">html</div>
</div>
我之前遇到过同样的问题,这是你需要的:
ResultsGrid {
display: grid;
gridTemplateColumns: repeat(auto-fill, 200px);
gridAutoRows: 10rem;
gap: 20px;
}
我有一个宽度和结果数量各不相同的网格。
网格中的每个单元格都是 200x200 像素。
随着网格的扩展,我希望列宽保持固定并添加新列。您可以想象网格最初有 3 列,当用户扩展 window 时,一个添加第四列以使用新的 whitespace.
此网格正在呈现一组搜索结果。
- 所以我需要能够根据结果数改变行数。
- 我需要能够让列动态地填满水平 space。
- 我需要结果在移动到下一行之前先填满每一行。
这是我一直在尝试的方法,但它目前无法正常工作,因为它只呈现单个列(CSS 在 JS 中,但它只是 CSS):
ResultsGrid: {
display: grid,
gridAutoRows: 280px,
gridAutoColumns: 280px,
gap: 20px,
gridAutoFlow: row-dense,
}
Result: {
border: 1px solid #EAEAEA,
}
期望的结果
这是我的实现:
auto-fit
参数与repeat
CSS函数
.grid-item {
border: 2px solid red;
background: orange;
color: red;
padding: 10px;
border-radius: 8px;
}
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, 200px);
grid-auto-rows: 200px;
gap: 6px;
}
<div class="wrapper">
<div class="grid-item">html</div>
<div class="grid-item">html</div>
<div class="grid-item">html</div>
<div class="grid-item">html</div>
<div class="grid-item">html</div>
<div class="grid-item">html</div>
</div>
我之前遇到过同样的问题,这是你需要的:
ResultsGrid {
display: grid;
gridTemplateColumns: repeat(auto-fill, 200px);
gridAutoRows: 10rem;
gap: 20px;
}