Вертикальное выравнивание с использованием сетки (align-self, align-contents) не работает (CSS) ⇐ CSS

[Anonymous]

Добрый день всем!
Кто-нибудь может увидеть, что я делаю неправильно? Я использую сетку ежедневно, но, хоть убей, не могу понять, что я сделал не так!
Я создаю новый базовый шаблон на работе, используя сетку CSS. Довольно просто, как шаблон сетки из 4 столбцов (и auto для строк шаблона сетки).
Затем есть заголовок, охватывающий 4 столбца, и 4-колоночный заголовок. нижний колонтитул, охватывающий столбцы.
Внутри каждой «ячейки» этой сетки я хочу центрировать весь контент по вертикали. Вместо этого он, похоже, выполняет выравнивание по верху и центру следующим образом:


Я пробовал присвоить каждой ячейке вертикальное выравнивание: посередине, высоту: 100%, и align-self: center, но безрезультатно. Всякий раз, когда я пытаюсь это сделать, каждая ячейка сворачивается до той же высоты, что и ее содержимое, а не расширяется по вертикали:


Я пытаюсь получить столбцы полной высоты со всем содержимым, центрированным следующим образом:


Мой код:
CSS:
.test-text-align-center {
text-align: center;
}
.test-text-align-left {
text-align: left;
}
.test-text-align-right {
text-align: right;
}
.test-bkgColor-black {
background-color: #000;
}
.test-bkgColor-white {
background-color: #fff;
}
.test-fontColor-black {
color: #000;
}
.test-fontColor-white {
color: #fff;
}

.test-banner,
.test-banner .test-columnGroup {
align-content: center;
display: grid;
}
.test-banner.test-layout-25_25_25_25,
.test-banner.test-layout-25_25_25_25 .test-columnGroup {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
}
.test-banner.test-layout-25_25_25_25 .test-columnGroup,
.test-banner.test-layout-25_25_25_25 .test-columnGroup .test-col-innerColContentWrapper {
grid-column: 1 / span 4;
}
.test-banner.test-layout-25_25_25_25 .test-fullSpan-col {
grid-column: 1 / span 4;
}

/* #################################### */
/* ### BEGIN RESPONSIVE BREAKPOINTS ### */
@media (min-width: 481px) AND (max-width: 767px) {
/* tablets */
.test-layout-25_25_25_25 .test-column {
grid-column-start: span 2;
}
.test-banner.test-layout-25_25_25_25 .test-column.test-fullSpan-col {
grid-column: 1 / span 4;
}

.test-layout-25_25_25_25 .test-column.test-heroImg-col {
display: grid;
grid-column-start: span 2;
}
.test-layout-25_25_25_25 .test-column.test-heroImg-col.test-imgCol-01,
.test-layout-25_25_25_25 .test-column.test-heroImg-col.test-imgCol-02 {
grid-row: 1 / span 1;
}
.test-layout-25_25_25_25 .test-column.test-heroImg-col.test-imgCol-03,
.test-layout-25_25_25_25 .test-column.test-heroImg-col.test-imgCol-04 {
grid-row: 2 / span 1;
}
}
@media (max-width: 480px) {
/* mobile, on-down */
.test-layout-25_25_25_25 .test-column {
grid-column: 1 / span 4;
grid-row-start: auto;
}
.test-layout-25_25_25_25 .test-column.test-heroImg-col.test-imgCol-01 {
grid-row: 1 / span 1;
}
.test-layout-25_25_25_25 .test-column.test-heroImg-col.test-imgCol-02 {
grid-row: 2 / span 1;
}
.test-layout-25_25_25_25 .test-column.test-heroImg-col.test-imgCol-03 {
grid-row: 3 / span 1;
}
.test-layout-25_25_25_25 .test-column.test-heroImg-col.test-imgCol-04 {
grid-row: 4 / span 1;
}
}
/* ### END RESPONSIVE BREAKPOINTS ### */
/* #################################### */

XHTML:

xxCol00xx



xxCol01xx
xxRow01xx
xxRow02xx
xxRow03xx
xxRow04xx


xxCol02xx
xxCol03xx
xxCol04xx

xxCol05xx



Подробнее здесь: https://stackoverflow.com/questions/793 ... orking-css