26. April 2017

Das neue "CSS-Grid" steht in den Startlöchern und tritt mit Bootstrap und Flexbox in Konkurrenz [Teil 1]

Bootstrap und Flexbox segnen das Zeitliche. Der Startschuss für das neue CSS-Grid-Layout ist gefallen und bringt einen denkbar einfachen Lösungsansatz in die Welt von HTML5 und CSS3. Einziger Wermutstropfen, aktuell funktioniert es nur in Browsern die ab März 17 aktualisiert wurden.

In den letzten Jahren hat sich bei CSS viel getan. Möchte man eine Webseite stylen, kommt man an den Cascading Style Sheets nicht vorbei. Schon mit der dritten Version (CSS3) kamen viele Neuerungen hinzu, die man heute nicht mehr missen möchte. Gerade druch Responsive Webdesign hat sich viel bewegt und die Möglichkeiten sind heute nahezu grenzenlos. So ist es beispielsweise möglich über die so genannten Media Queries in einem und dem selben CSS-File Darstellungszustände für unterschiedliche Browserauflösungen und Grössen zu setzen.

Frameworks wie beispielsweise Bootstrap und Flexbox erlangten grosse Aufmerksamkeit und Nutzerzahlen und waren über eine lange Zeit hinweg die perfekte Alternative zu Tabellen, wenn es darum ging, Spalten zu erstellen. Allerdings mussten hier mehrere Ebenen von Containern für die Spaltenstruktur verschachtelt werden und blähte so das HTML-Markup unnötig auf.

Das neue Gridsystem ist hier nun komfortabler und das Verschachteln von Containern segnet somit bald das Zeitliche. Mit dem neuen System ist es ausserdem möglich, Spalten bzw. Container zu verschieben, ohne damit dem HTML-Markup zu schaden oder ändern zu müssen. Dazu ein Beispiel:


Dreispaltiges Layout mit dem CSS Grid System

Wir erstellen in unserem HTML-File drei Container. Diese sehen wie folgt aus:

See the Pen EmZbdx by Tom Jähne (@failormooNN) on CodePen.

Nun fügen wir das neue CSS-Grid-System ein, das wie folgt aussieht:

See the Pen zwNPXx by Tom Jähne (@failormooNN) on CodePen.

Das übergeordnete Element, bei uns der Body, bekommt die Variable display:grid;.
So geben wir dem Body zu verstehen, dass sich in diesem Element Grid-Elemente befinden können/werden.
Als nächstes werden die grid-template-areas festgelegt. Wie dieses Areas heissen, kann jeder selbst entscheiden. Für eine veranfachte Darstellung habe ich hier einmal "a b c" genommen. Diese Darstellung zeigt nun, dass unsere 3 Elemente nebeneinander stehen sollen.

Damit nun unsere Spalten auch als "a b c" erkannt werden, müssen wir dies ebenfalls in unserem CSS-File über die grid-area festlegen. Das sieht dann wie folgt aus:

See the Pen gWgXEX by Tom Jähne (@failormooNN) on CodePen.

Rufen wir unser HTML-File nun in unserem Browser auf, ist zu sehen, dass wir drei gleich breite Spalten nebeneinander angeordnet haben. Um nun die Reihenfolge der Spalten zu ändern, genügt es die Reihenfolge der grid-areas in den grid-template-areas zu ändern.

Beispielsweise so:

See the Pen BRpmex by Tom Jähne (@failormooNN) on CodePen.


Nun haben wir unser erstes, sehr simples, Grid-Layout mit dem neuen CSS-Grid erstellt.

Im kommenden zweiten Teil, werde ich näher auf die Syntax und weitere Möglichkeiten
des neuen CSS-Grid-Systems eingehen.

Mehr zu diesem Grid-System und der Syntax findet Ihr auf:

Mozilla Developer Network



Schreibe einen Kommentar

Bitte achte darauf, alle Felder mit einem Stern (*) auszufüllen. HTML-Code ist nicht erlaubt.

team work2