不同流动和填充顺序的CSS网格布局
不同流动和填充顺序的CSS网格布局
提问于 2022-06-09 06:33:09
是否有一种方法可以使平面灵活的网格(或任何类似网格的)布局，首先填充列？
规则基本上是：
- 检查项是否适合一行，如果它们不适合则创建新行(如果布局的工作方式为
row wrap受容器宽度的约束)，则按 - 填充单元格列的方式(就像布局被
column wrap约束到给定的行数量中一样)
。
随着容器宽度的减少，它的视觉效果大致如下所示：
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
-----------------------------
| 1 | 3 | 5 | 7 |
| 2 | 4 | 6 |
-------------------------
| 1 | 4 | 7 |
| 2 | 5 |
| 3 | 6 |
-----------------------
| 1 | 5 |
| 2 | 6 |
| 3 | 7 |
| 4 |回答 1
Stack Overflow用户
发布于 2022-06-21 07:45:40
您可以尝试使用列属性而不是柔性盒或网格。设置column-count: 7;并指定列宽度。另外，火狐有一个奇怪的列布局错误，overflow: hidden;会在.item类中修复它。
.item {
overflow: hidden; /* Fixed strange behaviour for Firefox */
}
body {
background-color: #131b24;
}
.container {
--size: 100px;
width: fit-content;
column-width: var(--size);
column-count: 7;
column-gap: 0;
}
.item {
width: var(--size);
height: var(--size);
display: flex;
justify-content: center;
align-items: center;
overflow: hidden; /* for Firefox */
border: 2px solid red;
break-inside: avoid;
}
.item h1 {
font-size: 2em;
color: white;
}<div class="container">
<div class="item">
<h1>1</h1>
</div>
<div class="item">
<h1>2</h1>
</div>
<div class="item">
<h1>3</h1>
</div>
<div class="item">
<h1>4</h1>
</div>
<div class="item">
<h1>5</h1>
</div>
<div class="item">
<h1>6</h1>
</div>
<div class="item">
<h1>7</h1>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72555660
复制相关文章
相似问题
腾讯云开发者
