Как сделать макет одной строки с вертикальным центром в сетке CSS?

Question

Я пытаюсь сделать одну строку, вертикально центрированный макет, используя сетку CSS. Вот грубый набросок:

Замечания:

• У меня есть один ряд предметов
• Элементы (вероятно) будут одинаковой ширины
• Я не знаю много вещей, которые у меня есть (поэтому я не хочу говорить "200px" восемьдесят раз)
• Предметы имеют разную высоту, но должны быть по центру

(Случайное предложение, потому что уценка делает странные вещи)

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