css - 如何在 CSS 网格中进行垂直居中的单行布局？

Question

我正在尝试使用 CSS 网格进行单行垂直居中布局。这是一个粗略的草图:

笔记:

我有单排元素

这些元素(可能)将具有相同的宽度

我不知道我有多少元素(所以我不想说“200px”八十次)

元素高度不同，但需要垂直居中

HTML:

<div class="wrapper">
    <div class="box a">A</div>
    <div class="box b">B</div>
    <div class="box c">C</div>
</div>

CSS:

.wrapper {
    display: grid;
    grid-gap: 10px;
    grid-auto-columns: 200px;
    background-color: #fff;
    color: #444;
    .box {
        background-color: #444;
        color: #fff;
        border-radius: 5px;
        padding: 20px;
        font-size: 150%;
    }
}

我试过这个，但它真的想在一行上做多行而不是多列。
我可以在 CSS 网格中做单行、垂直居中的布局吗？如果是这样，如何？

Answer 1

这是一个工作示例。它与其他答案一样有效，但使用不同的 CSS 来避免显式设置网格行。点击下方的“运行”:

grid-auto-flow: column;使元素跨列流动，即进入单行

align-self: center;是否垂直居中

.wrapper {
    display: grid;
    grid-auto-flow: column;  
}

.box {
    align-self: center;
}

/* Additional styles below */

.wrapper {
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.box {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    font-size: 150%;
}

body {
  margin: 40px;
}
  
.box.a {
     height: 200px;
}
    
.box.b {
  height: 20px;
}

.box.c {
  height: 120px;
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box c">D</div>
</div>