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