CSS Grid Layout (1) HTML Tutorial deutsch Teil 18

In diesem HTML Tutorial deutsch beschäftige ich mich mit dem CSS Grid Layout. Du erfährst wie Grid Container und Grid Items zusammenhängen. Du lernst wie du deine Website mit dem CSS Grid Layout ganz einfach strukturieren kannst. Ich zeige dir wie du mit den CSS Anweisungen display: grid, grid-template-columns und grid-template-rows ein CSS Grid Layout erstellen kannst. Und du lernst die CSS Anweisungen grid-column-start, grid-row-start, grid-column-end und grid-row-end end kennen, mit denen du die Grid Items im CSS Grid Layout platzieren kannst. Außerdem erfährst du wie du mit grid-template-areas Bereiche definieren und mit grid-area die Grid Items den Bereichen zuweisen kannst.

Du möchtest HTML lernen und tolle HTML Websiten erstellen?
Dann bist du hier genau richtig. Bei diesem Tutorial lernst du die HTML Grundlagen kennen.
Geeignet für absolute Anfänger. Los geht´s!

Du hast Fragen oder Wünsche? Schreib doch einfach einen Kommentar!

Inhalt:
0:00 Intro
2:10 CSS Grid Layout erstellen (display: grid, grid-template-columns und grid-template-rows)
7:04 Grid Items platzieren (grid-column-start, grid-row-start, grid-column-end und grid-row-end)
11:44 Bereichsnamen definieren (grid-template-areas)
13:28 Grid Items den Zellen mit Bereichsnamen hinzufügen (grid-area)
17:20 Grid Items den Zellen mit Zeilen- und Spaltennummern hinzufügen (grid-area)
19:18 Zusammenfassung

****
Link zu unserem HTML & CSS E-Book:
Mehr Infos findest du hier:
****

Komplettes HTML & CSS Tutorial:

Falls dir der Kanal gefällt kannst du hier etwas spenden:

[leythecg]

Mit das Beste was ich hier gefunden habe! Sehr gut erklärt und in den Beispielen ohne überflüssigen Kram direkt auf den Punkt gebracht! Herzlichen Dank!

[marcussteinbeck]

Bin begeistert, sehr gut erklärt. Vielen Dank!

Tolle Videos! Sehr verständlich. Bis hier her habe ich es nun geschafft und werde auch sicher dran bleiben. Mfg Andi

[virtualsteff]

Schön erklärt und 5 Sterne für die Benutzung des Windows-Editors :-)

[Elchi]

Hallo erst Mal - gut gemachte Tutorials, herzlichen Dank für die viele Arbeit!
Ich hab eine Frage zur Nummerierung,
Normalerweise beginnt man beim Programmieren immer mit der 0.
Ist es in CSS generell so, dass man dort mit 1 beginnt.

[friedrichk.]

10:55 Das ist ein halb offenes Interval aus der Mathematik.

[xelsor]

bei Minute 8:05 verschreibst du dich leider
anstatt von *grid-row-end*
steht dort _grid-row:end_
was dann natürlich auch die ausgabe auf der fertigen seite rechts verfälscht

*EDIT: Das Ergebnis wird nicht verfälscht, weil zufälligerweise dieser Wert bei dieser Angabe keinen Unterschied macht 😀

[franzpaterna]

Soweit ich verstanden habe wird der Container so breit wie "body bzw. Browser". Die Höhe des Container als auch des body werden wie die Summe der Zeilenangabe "grid-template-rows: 100px 150px;", also 250px hoch? Die Höhe des Body und Containers passen sich also der Zeilenangabe an. Nicht jedoch die Breite, die stabil immer die Browser-Breite ausfüllt, unabhängig von der Breite der items. Ich dachte der Body ist eine fixe Größe vom Bildschirm und nur die Größe des Containers wird in Breite und Zeile bestimmt? Ich habe mir vom body als auch vom container die Umrandung anzeigen lassen um die Veränderungen beobachten zu können.
Weiters wird ein paar mal gezeigt, daß sich die items der Breite anpaßen, die ich durch verschieben vorgebe. Nicht jedoch die Höhe. Sie bleiben fix.

[christopherherlitz]

Also ich geb's auf. Bei mir waren die Elemente an allen möglichen Stellen, nur nicht da wo ich sie haben wollte. Frei nach dem Motto: Fröhlicher Ratespaß mit CSS. Da bleibe ich doch lieber bei "Flex" und "Grid" kann mir da begegnen, wo die Sonne nicht scheint. Das Gleiche habe ich auch schon über PHP gesagt, nachdem ich die Schleifen nie richtig kapiert habe.