kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

CSS Grid


Wissenswertes zum CSS Grid Layout

Das CSS Grid Layout kommt aufgrund des mittlerweile sehr guten Browser-Supports bei immer mehr Webseiten zum Einsatz.
Um dieses neue System zu verstehen und seine vielen Vorteile nutzen zu können ist es erforderlich, dass man sich intensiv damit beschäftigt. Dies hat Ohans Emmanuel getan und er teilt uns mit, was er beim Lesen der CSS Grid-Spezifikation alles gelernt hat.

Direkter Link zum Artikel

Interessante Features des CSS Grid Layouts

CSS Grids erlauben Layouts die weit über die Gestaltungsmöglichkeiten von Floats und auch der Flexbox hinausgehen. Manuel Matuzovic präsentiert einige interessante und nützliche CSS Grid Layout-Features – beispielsweise negative Werte – und veranschaulicht diese anhand von Beispielen.

Direkter Link zum Artikel

Explicit und Implicit Grids im CSS Grid Layout

Das CSS Grid Layout bietet die Möglichkeit, Raster in CSS zu definieren und Objekte in Rasterzellen zu platzieren. Dabei müssen wir nicht jede Zelle, Spalte und Zeile manuell angeben und ebenso wenig müssen wir jedes Objekt manuell platzieren. CSS Grids sind flexibel genug, um sich Objekte automatisch zu platzieren. Dies wird durch das so genannte explizite und implizite Raster gehandhabt. Um was es sich dabei handelt und worin der Unterschied besteht erläutert Manuel Matuzovic.

Direkter Link zum Artikel

CSS Grid Layout und die repeat-Funktion

Bei einer großen Anzahl von Spalten und/oder Zeilen können die CSS-Anweisungen durch die repeat-Notation präziser und leichter verständlich gestaltet werden. Die repeat-Funktion kann in den CSS-Grid-Eigenschaften grid-template-columns und grid-template-rows verwendet werden. Eine Übersicht vermittelt alligator.io.

Direkter Link zum Artikel

CSS Grid – Einführung in Gestaltungsraster mit dem Grid Layout Module

Komplexe Weblayouts lassen sich weder mit float-basierten Gestaltungsrastern noch mit Flexbox perfekt umsetzen. Die Floating-Technik wurde nicht zur Konstruktion komplexer Layouts entwickelt, was wir u.a. daran merken, dass wir Elemente nicht nach oben und unten verschieben können. Flexbox ermöglicht es zwar die Gestaltung vollständig vom HTML-Code zu trennen, bietet sich aber eher für lineare Strukturen an als für verschachtelte. CSS Grid ermöglicht »echte« Gestaltungsraster auf Basis von CSS. In diesem Beitrag beschreiben wir, wie Layouts mit Hilfe von CSS Grids konstruiert werden können.

Beitrag zu Ende lesen