Vertikale Ausrichtung mithilfe eines Rasters (align-self, align-contents) funktioniert nicht (CSS) [Duplikat] ⇐ HTML

[Guest]

Dies wird immer wieder gelöscht, ist aber in KEINEM der Duplikate enthalten, die immer wieder aufgelistet werden. Hier geht es darum, die Regeln „align-self“ und „align-contents“ von CSS Grid zu verwenden.
Kann jemand sehen, was ich hier falsch mache? Ich verwende Grid täglich, kann aber beim besten Willen nicht herausfinden, was ich falsch gemacht habe!
Ich erstelle bei der Arbeit eine neue, grundlegende Vorlage mit CSS Grid. Ziemlich einfach als 4-Spalten-Rastervorlage (und automatisch für die Rastervorlagenzeilen).
Dann gibt es einen 4-Spalten-übergreifenden Header und einen 4-Spalten-übergreifenden Header. Spaltenübergreifende Fußzeile.
Innerhalb jeder „Zelle“ dieses Rasters möchte ich den gesamten Inhalt vertikal zentrieren. Stattdessen scheint es eine Ausrichtung oben in der Mitte wie folgt durchzuführen:


Ich habe versucht, jeder Zelle eine vertikale Ausrichtung zu geben: Mitte, eine Höhe: 100 %, und ein align-self: center, aber ohne Erfolg. Immer wenn ich das versuche, verkleinert sich jede Zelle auf die gleiche Höhe wie ihr Inhalt, anstatt sie vertikal zu erweitern:


Ich versuche, Spalten in voller Höhe zu erhalten, bei denen der gesamte Inhalt wie folgt zentriert ist:


Mein Code ist:
CSS:

Code: Select all

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

Code: Select all

xxCol00xx



xxCol01xx
xxRow01xx
xxRow02xx
xxRow03xx
xxRow04xx


xxCol02xx
xxCol03xx
xxCol04xx

xxCol05xx