html - 使用 CSS 网格或 Flexbox 在垂直列中排序元素？

<分区>

是否有一种仅使用 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>

最佳答案

您可以使用 CSS 的 grid-template-area 来做到这一点。

代码如下所示。其中 grid-template-areas 表示放置。并且在元素的每个 id 中都将定义命名区域。 网格区域:a;。每个元素的 id 选择器不需要像我的示例中那样匹配网格名称。

*{
  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>

关于html - 使用 CSS 网格或 Flexbox 在垂直列中排序元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54912608/

上一篇：html - 保持 bootstrap slider 水平低于 991px

下一篇：html - 如何将 rel ="preconnect"添加到链接以外的标签？

相关文章：

javascript - 交互式 HTML 网页

ruby-on-rails - 电子邮件 css ruby 帮助

IE8 中的 CSS Only 自定义复选框

javascript - 在按钮上单击将 div 内部 html 分配给输入字段值

html - 向 CSS 网格布局中的每一列添加滚动

html - 如何使用 flex 为所有 div 获得相同的高度？

填充当前输入而不是第一个输入的 javascript 按钮

HTML 电子邮件 : Images go beyond its limited width in outlook

css - 将伪元素放置在输入类型范围的轨迹和拇指之间

html - 具有动态高度的垂直滚动 div