Aus dem Kurs: CSS Grid Grundkurs
Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.100 Kurse von Branchenfachleuten.
Spalten und Zeilen definieren
Aus dem Kurs: CSS Grid Grundkurs
Spalten und Zeilen definieren
Am Anfang steht die Definition des Rasters. Sehen wir uns an, wie das funktioniert. Im Beispiel habe ich ein div-Element mit der Klasse raster. In diesem befinden sich vier weitere div-Elemente mit passenden Klassen. Und ich habe ein paar grundlegende Formatierungen, wie Farben, Rahmen und einen border-radius bestimmt. So sieht das derzeit aus. Die Elemente werden untereinander dargestellt. Ich definiere nun das Raster. Dafür wähle ich das umfassende Element aus. Das hat die Klasse raster. Ich schreibe .raster. Und die Rasterdarstellung aktiviere ich über display: grid. Wenn wir es jetzt ansehen, hat sich erst mal noch nichts geändert. Das liegt daran, dass standardmäßig die Elemente untereinander dargestellt werden, auch wenn wir ein Raster definiert haben. Dann legen wir die Spalten fest. Das geschieht über die Angabe grid-template-columns. Ich nehme beliebige Spalten. Wenn ich schreibe "200px, 250px, 150px", dann geschieht zweierlei dadurch. Zum einen werden drei Spalten festgelegt…
Üben mit Projektdateien
Laden Sie die Dateien herunter, die von den Trainer:innen verwendet werden. So können Sie mitlesen und durch Ansehen, Zuhören und Üben lernen.
Laden Sie Kurse herunter und lernen Sie auch unterwegs.
Sehen Sie sich Kurse auf Ihrem Mobilgerät ohne Internetverbindung an. Laden Sie Kurse mit der LinkedIn Learning-App für iOS oder Android herunter.