EMZETT.CSS Grid teilt einen Container in Zeilen und Spalten ein und platziert Elemente in dieses Raster. Es ist das mächtigste Layoutsystem von CSS.
Ergebnis
Spalten und Zeilen definieren
| Eigenschaft | Beispiel | Bedeutung |
|---|---|---|
grid-template-columns | 200px 1fr 2fr | Breiten der Spalten |
grid-template-rows | auto 1fr auto | Höhen der Zeilen |
gap | 12px, 12px 24px | Abstände zwischen Zellen |
grid-auto-rows | minmax(80px, auto) | Höhe automatisch erzeugter Zeilen |
Die Einheit `fr` (fraction) teilt freien Platz in Anteile: 1fr 2fr ergibt ein Drittel und zwei Drittel.
Ergebnis
repeat(auto-fit, minmax(110px, 1fr)) ist eines der nützlichsten CSS-Muster überhaupt: ein responsives Raster ohne Media Queries. Es legt so viele Spalten an, wie mit mindestens 110 px passen, und verteilt den Rest.
Elemente platzieren
Mit Linien (die Linien zwischen den Spalten sind 1, 2, 3, ...):
Ergebnis
grid-column: 2 / 4Spalte von Linie 2 bis 4grid-column: span 2zwei Spalten breitgrid-column: 1 / -1über die ganze Breite
Seitenlayout mit Bereichsnamen
Mit grid-template-areas zeichnest du das Layout in Textform:
Ergebnis
Auf dem Handy änderst du in einer Media Query nur die Definition des Rasters, nicht das HTML:
@media (max-width: 600px) {
.seite {
grid-template-columns: 1fr;
grid-template-areas: "kopf" "menue" "inhalt" "fuss";
}
}Ausrichten
| Eigenschaft | Ebene | Wirkung |
|---|---|---|
justify-items, align-items | Container | Inhalt in jeder Zelle (horizontal / vertikal) |
justify-content, align-content | Container | Raster im Container verteilen |
justify-self, align-self | Kind | einzelnes Element |
place-items: center | Container | Kurzform: in allen Zellen zentriert |
Ergebnis
Dichte Raster und Galerien
Ergebnis
auto-fill legt leere Spalten an, auto-fit zieht sie zusammen. dense füllt Lücken.
Subgrid
Mit grid-template-columns: subgrid übernehmen verschachtelte Raster die Linien des Elternrasters, damit zum Beispiel Titel, Text und Button in jeder Karte exakt auf einer Linie liegen (in allen modernen Browsern verfügbar).
Grid oder Flexbox?
| Flexbox | Grid | |
|---|---|---|
| Dimension | eine (Reihe oder Spalte) | zwei (Zeilen und Spalten) |
| Steuerung | vom Inhalt aus | vom Raster aus |
| Gut für | Menüs, Buttonreihen, Zentrieren | Seitenaufbau, Galerien, Formulare |
Beides gemeinsam einsetzen: Grid für das große Layout, Flexbox für Inhalte in den Zellen.
Merke
display: gridmitgrid-template-columnsund-rowsfrteilt Platz in Anteile;repeat()undminmax()sparen Schreibarbeitrepeat(auto-fit, minmax(200px, 1fr))ergibt ein responsives Raster ohne Media Queriesgrid-column/grid-rowundgrid-template-areasplatzieren Elementeplace-items: centerzentriert in allen Zellen
Aufgabe
Baue ein Seitenlayout mit Kopf, Menü links, Inhalt und Fuß per grid-template-areas, das auf dem Handy einspaltig wird.