Grid - Gestaltungsraster
body {display: grid;}
Mit CSS Grid erzeugt ihr ein Gestaltungsraster, indem Zeilen und Spalten für einen Bereich definiert werden.
@media (min-width: 30em)
Hiermit wird die Webseite an die Monitorgröße angepasst.
grid-template-columns: 1fr 1fr 1fr;
columns steht für Spalte und xfr oder auto seht fürs Breitenverhältnis zueinander.
grid-template-rows: auto auto auto auto
rows steht für Zeile, mit auto wird die Zeilenhöhe je nach Inhalt angepasst. Auch hier ist es möglich mit xfr die Höhe zu definieren.
gap: 0.5em;
Angabe zum Abstand zwischen den einzelnen Boxen.