CSS

Verständliches CSS-Grid-Tutorial von Mozilla

CSS Grids werden seit vielen Jahren verwendet, um Webseiten schnell einheitlich und vor allem responsiv zu gestalten. Da CSS selbst nur rudimentäre Layout-Funktionialitäten mitbrachte, musste getrickst werden und da das eine Menge Arbeit war, tauchten immer mehr CSS Frameworks auf, die das (und vieles andere) übernahmen. Die größten Namen sind hier aktuell seit einigen Jahren Bootstrap oder Foundation, aber es kommen ständig neue dazu, wie z.B. bulma.io. Die meisten bieten ein 12-spaltiges Grid an, das als Layout-Hilfe genutzt werden kann. Man erstellt beispielsweise zwei Divs, gibt dem einen die Klasse „col-md-9“ und der anderen die Klasse „col-md-3“ und hat ein zwei-spaltiges Grid im Verhältnis 3/1. „col“ steht dabei für „columns“, also „Spalten“, „md“ steht für „Medium“ – die Bildschirmgröße – und die Zahl am Ende für die Anzahl der Spalten, indem Fall für das Verhältnis 3 zu 9. Seit März 2017 supporten alle wichtigen Browser CSS Grids, der Internet explorer bildet mal wieder eine kleine Ausnahme, Edge unterstützt Grids ab Version 16 komplett. Mehr Details dazu findet ihr auf Can I Use.

 

Da das neue CSS-Feature nicht ganz trivial ist, gibt es einige Quellen, die den Umgang mit Grids erklären möchte. Ein sehr umfangreiches und verständliches Tutorial kommt von Mozilla und erklärt mit vielen Beispielen und Grafiken, wie CSS Grids funktionieren und wie man sie verwendet.

CSS Grid Mozilla

Schaut es euch einfach mal an und spielt ein wenig rum, CSS Grids sind kein Hexenwerk und es schadet nicht, sich damit auszukennen, auch wenn man sich mit Bootstrap & Co eigentlich keine Gedanken um sowas zu machen braucht. Aber zu wissen, wie etwas funktioniert, ist immer von Vorteil.

Kommentar verfassen