我必须设计一个响应式网格。
网格应根据元素数量(而不是屏幕大小)进行更改。
5 到 6 个元素应该是 2x3,
7 到 9 个元素应该是 3x3,
10 到 12 个元素应该是 3x4,
从 13 到 16 个元素应该是 4x4,
等等……
这是我可以使用 CSS Grid 做的事情吗?
这是我试过的:
<main>
<figure>
<img src="https://placekitten.com/600/400" alt="">
</figure>
<figure>
<img src="https://placekitten.com/600/400" alt="">
</figure>
<figure>
<img src="https://placekitten.com/600/400" alt="">
</figure>
<figure>
<img src="https://placekitten.com/600/400" alt="">
</figure>
<figure>
<img src="https://placekitten.com/600/400" alt="">
</figure>
</main>
main {
/* display: flex; */
/* flex-wrap: wrap; */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
align-content: stretch;
height: 100vh;
}
figure {
margin: 0;
/* flex-grow: 1; */
/* flex-basis: 12rem; */
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
最佳答案
隐式列创建可以做到这一点。您可以考虑 nth-child()
/nth-last-child()
在达到特定列数时创建一个新列:
.container {
display: inline-grid;
width: 100px;
vertical-align: top;
border: 1px solid;
}
.container > :nth-child(2) {
grid-column: 2;
}
.container > :nth-last-child(n + 5) ~ :nth-child(3) {
grid-column: 3;
}
.container > :nth-last-child(n + 10) ~ :nth-child(4) {
grid-column: 4;
}
.container > :nth-last-child(n + 17) ~ :nth-child(5) {
grid-column: 5;
}
.container > * {
border: 1px solid red;
aspect-ratio: 1;
}
<div class="container">
<div></div>
</div>
<div class="container">
<div></div><div></div>
</div>
<div class="container">
<div></div><div></div><div></div>
</div>
<div class="container">
<div></div><div></div><div></div><div></div>
</div>
<div class="container">
<div></div><div></div><div></div><div></div><div></div>
</div>
<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<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 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 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 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 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 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 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 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 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>
关于css - 随着元素数量的增加更改网格中的列数和行数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61196568/