Grid
Jetzt die Karten. Im CSS-Kurs hast du Karten mit display: grid und grid-template-columns in einem Raster angeordnet. In Tailwind schaltet die Klasse grid das Grid ein, und die Spalten legen die Klassen grid-cols-* fest:
.grid {
display: grid;
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}Die Zahl in der Klasse ist die Anzahl der Spalten: grid-cols-3 macht drei, grid-cols-4 vier und so weiter; jede Zahl funktioniert. Die Spalten sind immer gleich breit. Jede bekommt einen Anteil des Platzes (1fr, wie du weißt), und minmax(0, 1fr) bedeutet, dass eine Spalte schmaler werden darf als ihr Inhalt: Ein langes Wort in einer Karte kann ihre Spalte nicht breiter machen als die anderen.
Die Abstände zwischen den Zeilen und Spalten legen dieselben Klassen fest wie bei Flexbox: gap-* oder getrennt gap-x-* und gap-y-*.
Brauchst du Spalten unterschiedlicher Breite? Schreibe sie in eckige Klammern, wie die beliebigen Werte, die du kennst (w-[350px]), mit einem Unterstrich statt jedes Leerzeichens: grid-cols-[12rem_1fr] macht eine Spalte von 12rem Breite und eine zweite, die den Rest nimmt.
So schreibst du es:
Anweisungen
- 1
Füge dem
div, das die Karten enthält (es steht direkt unter den Labels), die Klassegridhinzu. Noch ändert sich nichts: Ein Grid ohne Spalten hat nur eine Spalte. - 2
Füge die Klasse
grid-cols-2hinzu. Die Karten stehen jetzt in zwei Spalten, und die Neuigkeiten-Box hat eine eigene Zelle in der dritten Zeile bekommen. In einer schmalen Vorschau sind zwei Spalten eng: Auf einem Smartphone wäre eine Spalte besser und auf einem großen Bildschirm vier. Wie du die Anzahl der Spalten an die Breite des Bildschirms anpasst, lernst du in der Lektion über responsives Design. - 3
Die Karten berühren sich. Füge die Klasse
gap-6hinzu: 24 px zwischen den Zeilen und den Spalten.