使用CSS网格或Flexbox在垂直列中订购商品？ [重复]

Question

这个问题在这里已有答案：

• Make grid container fill columns not rows 5个答案

是否有一种仅使用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 - 我也可以通过指定每列的项数来间接控制列数，但我想指定一些列：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>

Answer 1

您可以使用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>