Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.

Ein unregelmäßiges Grid-Layout mit unterschiedlich breiten Spalten und Zeilen

Ein unregelmäßiges Grid-Layout mit unterschiedlich breiten Spalten und Zeilen

Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

Gratismonat starten Für Ihr Team erwerben

Ein unregelmäßiges Grid-Layout mit unterschiedlich breiten Spalten und Zeilen

“

Sie können mit dem CSS Grid-Layout natürlich nicht nur regelmäßige Layouts erstellen, sondern auch unregelmäßige, bei denen einzelne Grid-Items sich über mehrere Spalten oder auch Zeilen erstrecken. Das möchte ich Ihnen jetzt kurz zeigen, wie das geht. Und dazu habe ich die Dateien aus dem Anfangsordner zu diesem Film in den Übungsordner kopiert und hier bereits eben den Browser geöffnet. Das ist hier der Chrome, und ich möchte jetzt dieses Grid-Item hier unten links modern und praxisnah etwas hervorheben. Sie sehen hier, Grid-Container ist div class "inside". Ich klicke das hier oben an, dann wird die Grid-Struktur hervorgehoben, und ich möchte jetzt das Grid-Item Nummer 1, 2, 3, 4, 5 hervorheben, und dann lautet der Selektor .kundenstimme. So, ich klicke hier einmal eben drauf, damit wir den auch hervorgehoben haben. So, und der Selektor, da waren wir stehen geblieben, lautet end-child5. Und jetzt gibt es die Eigenschaft grid-column, die Sie bereits kennen zum Platzieren von…

Inhalt