Spalten überspannen
Die Neuigkeiten-Box sitzt in einer Zelle der dritten Zeile, und die Zelle daneben ist leer. Über die ganze Breite des Grids sähe sie viel besser aus.
Im CSS-Kurs hast du ein Grid-Element mit grid-column: span 2 über mehrere Spalten gestreckt. In Tailwind gibt es dafür diese Klassen:
| Klasse | CSS | Das Element ist... |
|---|---|---|
col-span-2 | grid-column: span 2 / span 2; | zwei Spalten breit |
col-span-full | grid-column: 1 / -1; | so breit wie alle Spalten |
row-span-2 | grid-row: span 2 / span 2; | zwei Zeilen hoch |
span 2 / span 2 bedeutet dasselbe wie span 2: Tailwind schreibt es nur für den Anfang und das Ende des Elements.
Ein Element kann auch an einer bestimmten Gridlinie beginnen oder enden: col-start-2 ist grid-column-start: 2, und col-end-4 ist grid-column-end: 4. Die Linien sind ab 1 nummeriert, wie du weißt.
So schreibst du es:
"Shift + 2
:Shift + .
/Shift + 7
<<
>Shift + <
[Alt Gr + 8
]Alt Gr + 9
{Alt Gr + 7
}Alt Gr + 0
##
@Alt Gr + Q
Anweisungen
- 1
Füge der Neuigkeiten-Box (dem orangen
divunter den Karten) die Klassecol-span-2hinzu. Sie überspannt jetzt beide Spalten.