CSS 3 Tutorial #20 - Grid Layouts

In diesem Tutorial sehen wir uns das Grid Layout von CSS an.

_Discord:_

_Unterstützt mich - Danke!:_

[cosmicspawn]

So, bin durch mit der Reihe. Vielen Dank dafür! :D
Was ich total feiern würde, wäre wenn du ergänzend zu der HTML und CSS Reihe zeigen würdest, wie du so nen Bau einer Webseite angehst. Ich nehme mal an, dass es sinnvoll ist, sich vorher schon mit dem Layout zu beschäftigen, damit man weiß, wo man hin will. Kann auch Ruhig ein längeres Video sein, oder gar ein Live-Stream. Ich fände das einfach mal interessant zu sehen, wie du da vorgehst. :)

[schmaler]

Schön erklärt, doch ich bin in den 90ern mit Webdesign groß geworden und habe durch Jobwechsel viel verpasst. Habe immer alles mitr Tabellen progrmmiert, ist aber bei den vielen Bildschirm-unterschieden nicht mehr realisierbar...hänge gerade bei meiner webite fest, obwohl ich eigentlich nur oben 6Button (<nav>?)habe in der Mitte ein Bild (main?) und unten eine Reihe (footer?) mit Facebook, Instagramm und youtube... das soll nicht breiter sein als 900px und dann in der Mitte des Browsers...das die Buttons und Bilder skaliert werden habe ich bereits hinbekommen...aber der Aufbau und gliederung ist mir noch nicht klar...Danke Gruß Kay

[zebAstreamt]

Danke! Kann man gridplätze leer lassen und dann erst die Box 1 anzeigen lassen?

[chupapimunanyo]

5:56 So wie ich das verstanden habe ist Spalte 1 && 2 "1/4" groß und Spalte 3 ist "2/4". Warum geht denn jetzt "Erste Box" in Spalte drei wenn sie gar nicht 2/4 groß ist ? sie müsste doch in reihe 2 spalte 1 ..?

[CoderboyPB]

Lass mich raten, auf dieses Grid Layout basiert auch das Gridsystem von Bootstrap?

[stefandahlmann]

Ich denke, dass CSS-Grid ein großes Thema für die Webseitengestaltung in 2018 wird.
Ich bin sehr gespannt, wann in 2018 vermehrt Webseiten im Internet auftauchen, die das CSS-Grid Layout nutzen.
Das CSS-Grid läßt sich wunderbar mit der Flexbox ergänzen für einzelne Bereiche wie z.B. Menüs zu gestalten.
Beim IE10+11+alte Edge gibt es einen älteren MS-Grid CSS Syntax, der als Fallback eingebaut werden kann.
Soweit ich gesehen habe, ist der W3C-Status bei CSS-Grid und der Flexbox aktuell im Prinzip der gleiche. Ich glaube, dass CSS-Grid mittlerweile den Beta-Status verlassen hat und einen RC-Status hat.

[pastorpixel]

Ich zitiere: ...das Flexlayout geht nur nach rechts, nach unten ist eigentlich nicht viel passiert.... Das stimmt nicht. Der Unterschied zwischen Flex und Grid ist spezieller.

[jobcentertycoon]

1:24 der war jetzt überraschend, damit hätte ich nie gerechnet das das so geht.

[doublepipe.]

Das funktioniert bei mir immer noch nicht, obwohl ich Firefox in der aktuellsten Version verwende. Notepad++ (ebenfalls aktuell) kommt auch nicht damit zurecht.

[jobcentertycoon]

Notepad++ kennt das irgendwie nicht, benutze jetzt Atom und jetzt komme ich auch besser darauf klar. Auch das mit dem Flex ist jetzt einfacher.

Übrigens: Nochmal ein danke für die guten Videos

[randomquark]

Kannst de mal nen Video machen wie ich meine Website auf das Smartphone anpassen kann?

[jonasfeierabend]

hey ich schaue nun deine css serie eine zeit nach der veröfentlichung, bisher hat auch alles geklappt und ich benutzte web matrix nun habe ich das problem dass ich zwar display:flex eingeben kann dies wird mir aber als fehler angezeigt und im browser wird auch nichts verändert (mit display:grid gehts) hab deswegen keine ahnung was ich falsch mache oder ob das vielleicht an webmatrix liegt mit dem ich schon öfter probleme hatte. Vielleicht kann mir ja jemand sagen woran es liegt vielen dank schon mal und entschuldigung für die vielen rechtschreibfehler

[lennyl]

Super Reihe! Kannst du vielleicht noch etwas zu scss machen ?

[naheliegend]

Gut, aber ich finde es besser, wenn man sich ein komplettes grid baut und jede Zelle benennt mit header, content, Folter etc und dann die Boxen je nach Bildschirm mit @media query mehr Platz in diesem Grid zuweist. Irgendwie intuitiver

[tchrbt]

Wieso zeigt du jetzt schon Grid, ich fände mehr flexbox besser da grid noch kein css standard ist und nur so eine Art Beta ist die nur auf modernen Browser funktioniert.

[nvrmnd.]

Leider ist Grid ja noch immer nicht vollständig implementiert. Wird zukünftig aber sicher sehr interessant. Spätestens, wenn man den IE8 endlich in die Tonne schmeißen kann! ;)

[denkling]

Inhaltlich wirklich das Wesentliche in kürzester Zeit auf den Punkt gebracht, Dein Gerede ist mir ein bissi zu schnell. Würde mich zumindest nach 1-2 Stunden sicher nerven.