CSS Grid Tutorial Deutsch für Anfänger [30+ Minuten]

CSS Grid Tutorial Deutsch für Anfänger. CSS Grid ist eines der umfangreichsten Varianten wie du Elemente positionieren kannst. Ich zeige dir wie du dir ein Grid Template aufbaust, es ausrichtest und anordnest und wie du die einzelnen Elemente darin positionieren kannst. Happy Coding!

⏩ Videoinhalt
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
00:00 Einleitung
01:39 Aufbau des Grid Containers
13:12 Positionierung Grid Elemente
20:15 Positionierung mit Grid Areas
23:48 Ausdehnung der Grid Elemente
28:00 Ausdehnung Global
30:37 Ausrichtung des Flex Containers
34:30 Wie gehts weiter

⭐ Das könnte dich auch interessieren
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CSS Flexbox Tutorial Deutsch für Anfänger:

Wie Du deine CSS Technik SOFORT verbesserst:

Bootstrap Website Tutorial Deutsch für Anfänger:

📌 Über diesen Kanal und mich
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Webentwicklung effizient und einfach. Alles rundum Webentwicklung, Webdesign und angrenzende Themen. Mein Name ist Mario und ich bin bereits seit über 15 Jahren als Webentwickler tätig. Einige Tutorials auf diesem Kanal sind für absolute Anfänger ohne Vorkenntnisse geeignet, und andere für erfahrene Entwickler.

Starte Jetzt!

#CSS #Grid #ProgrammierenM

[littlenosydragon]

Lieber Mario. Vielen dank für deine tollen Tutorials. Dei Stil ist sehr angenehm und nicht zu viel unnötiges Gerede.

[Xcf_]

So nützlich, vielen Dank! Habe das in meinem Heft nur so halbherzig verstanden gehabt.

[MrJokerclass]

Danke für die informativen Videos. Sie helfen mir sehr meinen Unterricht vorzubereiten! Grüße aus Österreich!

[astariel_windlied]

Ich schließe mich meinem Vorredner an. Sehr gelungenes Video. Vielen Dank dafür

[emmelieweber]

Danke für das tolle Tutorial!!! Ich studiere Mediendesign und einer meiner Kurse ist Medieninformatik. Wir hatten eine Hausaufgabe zu dem Thema Grid aufbekommen und bevor ich dieses Video gesehen habe, habe ich bereits 4 Stunden versucht die Aufgabe zu lösen. Als ich dann das Tutorial gesehen habe, war ich innerhalb einer Stunde fertig. Also nochmal vielen, vielen Dank !!!

[vepman]

Habe hier mehr über CSS Grid gelernt als in den entsprechenden Büchern. Gute Beispiele im Video,
sowie deine ruhige Art zu erklären, machen richtig Spaß deine Videos zu verfolgen. Danke!!!

[kou]

Hallo Mario, wieder ein neues Video und wieder ist es super gelungen.
Ich sage jetzt schonmal Danke für deine bisherigen Videos, deine ruhige und positive Art ist sehr angenehm.
Ich freue mich auf weiter Videos zum Programmieren :)

[jak]

Mario, du bist mir einfach mal super sympathisch. Danke für die Mühe und die tolle ruhige Erklärung. Ich konnte mir so einiges mitnehmen :D

Danke!

[michaelreuter]

Super übersichtlich geworden. Jedoch finde ich die gute alte Tabelle deutlich einfacher und das reicht zu 99%.

[johanneslangosch]

Hallo Mario, wollte nur einmal vielen Dank sagen für deine tollen Videos!

[MarioDobelmann]

Hallo Namensbruder :), herzlichen Dank für das super Video! Mir gefällt die Art und Weise wie du das machst und die ruhige Art auch sehr gut, deswegen gleich mal ein Abo. Freue mich auf weitere Videos! Liebe Grüße aus dem Alpenvorland Mario

[vido-]

Ich kann mich den anderen Kommentatoren nur anschließen. Ich finde es toll mit welcher Ruhe du deine Videos produzierst und wie unkompliziert du die Themen erklärst. Deine Videos sind eine sehr gute Unterstützung! Danke dafür :)

[gamehubler]

Mario danke fürs tolle Video über das Thema CSS Grid.
Ich mag deine lockere Art, hier schaue ich eher mal ein Video als bei den vielen anderen Youtube Videos.
Irgendwie kann ich das bei deinem Erläutern sehr viel angenehmer Aufsaugen.

Ich freue mich auf das restliche Jahr und bin gespannt wo dein Projekt mit (Programmieren mit Mario) in einem Jahr steht.
Das Interesse an Programmieren, Webseiten Erstellen ist fortlaufend und guter Evergreen Content.
Die 1000 Abonenten sind dir bestimmt noch über das restliche Jahr 2021 sicher.

Über einen 2. Teil würde Ich mich freuen um die restlichen Elemente noch kennenzulernen.
Eventuell als Abschluss des CSS Grids noch ein kleines beispiel Projekt.
Wo mit vielen unterschiedlichen Positionierung des CSS Grids arbeite um einen Blick zubekommen für die Umsetztungsvielfalt.

Besten Dank für deine tolle Arbeit an den Videos.

[nymoras]

Super Tutorial, hat mir sehr geholfen.

[Jeschurunderte]

Dolle Sache! Kann man da auch noch mit responsive Verhalten etwas machen? So das man wenn man damit ein 3 spaltiges Seitenlayout macht, die Spalten sich auf Mobilphonen untereinander stapeln?

[solotunic]

Wieder einmalig gut. Eine Frage hätte ich noch: Was bedeutet der Punkt zwischen main main . sidebar ?

[markolukas]

Danke für die Einführung ins Grid-System. Das vereinfacht doch so einiges bei der Positionierung auf einer Seite.
Könntest Du mal ein Video machen, wie man heute eine Navigation bauen würde, die auf allen Bildschirmgrößen (und Browsern) funktioniert?

[franzpaterna]

Sehr gut und verständlich erklärt. Ich habe mich zwar noch mit der alten HTML bis HTML 5 und die Flexbox beschäftigt, aber jetzt länger nicht mehr. "Grid" ist daher ein Neuland. Die Verwendung von Flexbox ist mir verständlich aber wo und anstatt was setzt man Grid ein? Gibt es dazu Beispiele oder Webseiten die damit aufgebaut sind?

[michel]

hallo mario, super deine videos. bei mir erscheint das "grid" icon nicht im html code. wo kann ich dies einstellen damit es mir das raster mit den zahlen auch anzeigt so wie bei dir? gruss und danke

[kottiwood]

Hallo Mario, super Tutorial zu Grid, Danke. Kann man denn auch einen Bereich definieren der wie ein L aussieht statt nur horizontale oder vertikale Bereiche zu definieren?