column layout
Um die Erstellung eines mehrspaltigen Seitenlayouts (column layout) ohne viel Code zu ermöglichen, sollen drei neue CSS-Eigenschaften eingeführt werden.
Zum einen kann man mit column-count festlegen, wie viele Spalten erzeugt werden sollen, mit der Eigenschaft column-gap gibt man den Abstand zwischen den einzelnen Spalten an und mit column-width legt man die Breite der Spalte fest. Dabei sollen nur prozentuale Angaben möglich sein.
Beispiel:
body {
display: grid;
gap: 10px;
}
@media (min-width: 500px) {
body {
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto 1fr 100px;
}
header,footer {
grid-column: 1 / -1;
}Zusammenfassend kann gesagt werden: Das Holy-Grail-Layout ist ein Webseiten-Layout, das mehrere, trotz unterschiedlichen Inhalts gleich hohe Spalten hat.
Weiterführende Infomationen findet ihr auf: https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/mehrspaltige_Layouts