使用CSS网格或Flexbox在垂直列中排序项目？
使用CSS网格或Flexbox在垂直列中排序项目？
提问于 2019-02-28 02:55:50
有没有一种只有CSS的方式来对网格布局中的列中的项目进行排序，而不使用像素值？Flexbox也可以工作。我需要使用相同的HTML来支持以下两个场景(动态生成的HTML中的列数介于1和5之间)：
案例A：
| item 1 | item 2 | item 3 |
| item 4 | item 5 | item 6 |
| item 7 | item 8 | item 9 |案例B：
| item 1 | item 4 | item 7 |
| item 2 | item 5 | item 8 |
| item 3 | item 6 | item 9 |案例A很简单，只需要做如下操作：
.case-a[data-column-count='3'] {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
<div data-column-count="3" class="case-b">
<label>item 1</label>
<label>item 2</label>
<label>item 3</label>
</div>我最接近的代码是这个Codepen，尽管垂直对齐在每个单独的列上都很混乱：https://codepen.io/anon/pen/zbGWRa
body {
font-family: sans-serif;
}
.columns {
column-width: 18vw;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 2em;
grid-gap: .5em;
align-items: center;
background: #eee;
padding: .5em;
box-decoration-break: clone;
counter-reset: nb;
border: 2px solid red;
}
input {
align-self: stretch;
border-radius: 2px;
border: 1px solid #ccc;
}
label::before {
counter-increment: nb;
content: counter(nb) ". ";
}<div class="columns">
<div class="grid">
<label>label</label>
<input type="text">
<label>label</label>
<input type="text">
<label>label</label>
<input type="text">
<label>label</label>
<input type="text">
<label>label</label>
<input type="text">
<label>label</label>
<input type="text">
<label>label</label>
<input type="text">
</div>
</div>
另一个Codepen -I还可以通过指定每列的项数来间接控制列数，但我只想指定一个列数：https://codepen.io/anon/pen/BbNqGE
.container {
display: grid;
grid-template-columns: 1fr;
}
.container {
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
grid-auto-columns: 1fr;
grid-auto-flow: column;
}
* {
box-sizing: border-box;
}
body {
font-size: 1.35em;
font-family: 'Varela Round', sans-serif;
color: #fff;
background: #e8e9e9;
padding-left: 5%;
padding-right: 5%;
}
.container {
padding: 10px;
background: #fff;
border-radius: 5px;
margin: 45px auto;
}
.item {
color: #fff;
padding: 15px;
margin: 5px;
background: #3db5da;
}<div class="container">
<div class="item-1 item">Item 1</div>
<div class="item-2 item">Item 2</div>
<div class="item-3 item">Item 3</div>
<div class="item-4 item">Item 4</div>
<div class="item-5 item">Item 5</div>
<div class="item-5 item">Item 6</div>
<div class="item-5 item">Item 7</div>
</div>
回答 1
Stack Overflow用户
发布于 2019-02-28 03:13:34
你可以用CSS的grid-template-area来实现。
代码将如下所示。其中grid-template-areas表示放置。并且在元素的每个id中将定义命名区域。grid-area: a;。每个元素的id选择器不需要与我的示例中的grid-are名称匹配。
*{
box-sizing: border-box;
}
.wrapper {
color:white;
font-size: 2em;
display:grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 100px 100px;
grid-template-areas:
"a d g"
"b e h"
"c f i";
}
#a{
background-color:rgb(180,247,182);
grid-area: a;
}
#b{
background-color:rgb(250,235,122);
grid-area:b;
}
#c{
background-color:rgb(167,255,250);
grid-area:c;
}
#d{
background-color:rgb(227,176,252);
grid-area:d;
}
#e{
background-color:rgb(157,255,205);
grid-area:e;
}
#f{
background-color:rgb(243,152,98);
grid-area:f;
}
#g{
background-color:rgb(55,32,199);
grid-area:g;
}
#h{
background-color:rgb(120,152,98);
grid-area:h;
}
#i{
background-color:rgb(243,100,98);
grid-area:i;
}
.wrapper > div {
display: flex;
align-items: center;
justify-content: center;
}<div class="wrapper">
<div id="a">1</div>
<div id="b">2</div>
<div id="c">3</div>
<div id="d">4</div>
<div id="e">5</div>
<div id="f">6</div>
<div id="g">7</div>
<div id="h">8</div>
<div id="i">9</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54912608
复制相关文章
相似问题
腾讯云开发者
