英文:
How to make the size of columns responsive to the number of elements?
问题
我需要创建一个响应式网格布局，其中最后一行可能在元素数量为奇数的情况下包含较少的元素，但无论如何都需要占满整个宽度。元素将在管理员中添加，因此我们只知道元素的数量和在CSS/JS中的某些条件下需要的空间。我该如何做？
我尝试了auto-fit，但我不知道如何将它均匀分布在多行。
这是我想要的示例：
英文:
I need to make responsive grid layout where the last row might has less elements in case of odd number of elements, but anyway it needs to be stretched on full width. Elements will be added in admin so we have just quantity of elements and space for some condition in css/js. How can i do it?
I tried auto-fit, but i don't know how to split it on equal rows
Here is an example of how I want it:
答案1
得分: 2
请使用 flex 替代 grid：
.container {
display: flex;
gap: 5px;
flex-wrap: wrap;
}
.container > * {
flex: 1 15%;
background: red;
height: 25px;
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
英文:
Use flex instead of grid:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
display: flex;
gap: 5px;
flex-wrap:wrap;
}
.container > * {
flex: 1 15%;
background: red;
height: 25px;
}
<!-- language: lang-html -->
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论