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

Question

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

注意：

• 我有一行项目
• 这些项目（可能）宽度相同
• 我不知道我有很多项目（所以我不想说＆＃39; 200px＆＃39;八十次）
• 项目具有不同的高度，但需要垂直居中

（随机句，因为降价做奇怪的事情）

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


.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

要强制所有项目成为一行，请将其设置为grid-row: 1。

要将项目居中，请将容器设置为align-items: center，或将每个项目设置为align-self: center。 （默认情况下，align-self会继承align-items值。

.wrapper {
  display: grid;
  align-items: center;     /* new */
}

.box {
  grid-row: 1;             /* new */
}

.box.a { height: 200px; }
.box.b { height: 20px;  }
.box.c { height: 120px; }
.box.d { height: 50px;  }


/* non-essential decorative styles */

.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;
}

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

Answer 2

这是一个有效的例子。它的效果和其他答案一样，但使用不同的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>