de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Einführung in das CSS Grid Layout Modul

Es waren einmal Tabellen, dann Ränder und Gleitkommazahlen, dann Flexbox und jetzt Raster : CSS lenkte immer neue und bessere Wege, um den uralten Job der Programmierung von Weblayouts zu erleichtern. Das CSS-Grid-Layoutmodell kann das Layout entlang zweier Achsen erstellen und aktualisieren: horizontal und vertikal, was sich sowohl auf die Breite als auch auf die Höhe der Elemente auswirkt .

Das Rasterlayout hängt nicht von der Position der Elemente im Markup ab. Daher können Sie die Platzierungen von Elementen im Markup mischen, ohne das Layout zu ändern. Im Rastermodell wird ein Raster-Container-Element in Rasterspalten und -reihen (zusammen als Rasterspuren bezeichnet ) durch Rasterlinien unterteilt . Sehen wir uns nun an, wie Sie ein Beispielraster erstellen können .

Browserunterstützung

Zum Schreiben dieses Artikels wird das CSS-Grid-Modul nur vom neuesten IE-Browser und Edge unterstützt. Das CSS-Grid befindet sich in einem experimentellen Stadium in den anderen gängigen Browsern, in denen Sie die Unterstützung manuell aktivieren müssen :

  • Firefox: Drücken Sie Umschalt + F2, geben Sie den folgenden Befehl in die GCLI-Eingabezeile ein, die unten im Browser angezeigt wird: pref set layout.css.grid.enabled true .
  • Chrome: Durchsuchen Sie die URL chrome://flags und aktivieren Sie die Funktionen von Experimental Web Platform features .

Alle wichtigen Browser-Funktionen werden voraussichtlich Anfang / Mitte 2017 verfügbar sein .

Ein Beispielraster

Um ein Element in einen Gittercontainer zu verwandeln, können Sie eine der drei folgenden display verwenden :

  1. display: grid; - Das Element wird in einen Blockraster-Container konvertiert
  2. display: inline-grid; - Das Element wird in einen Inline-Gittercontainer konvertiert
  3. display: subgrid; - Wenn es sich bei dem Element um ein Rasterelement handelt, wird es in ein Unterraster konvertiert, das die Rastervorlagen- und Rasterlückeneigenschaften ignoriert

So wie eine Tabelle aus mehreren Tabellenzellen besteht, besteht ein Gitter aus mehreren Gitterzellen . Ein Rasterelement wird einer Gruppe von Rasterzellen zugewiesen, die zusammen als Rasterbereich bezeichnet werden .

Wir werden ein Raster mit fünf Abschnitten (Rasterbereichen) erstellen: oben, unten, links, rechts und Mitte. Das HTML besteht aus fünf divs in einem Container div .

oben
Links
Center
Recht
Unterseite

Im CSS definiert die Eigenschaft grid-template-areas ein Raster mit verschiedenen Rasterbereichen . In diesem Wert steht eine Zeichenfolge für eine Rasterzeile und jeder gültige Name in einer Zeichenfolge für eine Spalte . Um eine leere Gitterzelle zu erstellen, müssen Sie das Punktzeichen ( . ) Innerhalb einer Zeilenfolge verwenden.

Die Netzbereichsnamen müssen durch die grid-area der einzelnen Netzelemente referenziert werden.

 .grid-container {Breite: 500px; Höhe: 500px; Anzeige: Gitter; Gitter-Vorlage-Bereiche: "oben oben oben" "links Mitte rechts" "unten unten"; } .grid-top {Gitterbereich: oben; } .grid-bottom {Gitterbereich: unten; } .grid-left {Gitterbereich: links; } .grid-right {Gitterbereich: rechts; } .grid-center {Gitterbereich: Mitte; } 

Dieser Code erstellt also ein Raster mit drei Zeilen und Spalten . Das top Element belegt einen Bereich, der sich über drei Spalten in der ersten Zeile erstreckt, und das bottom Element erstreckt sich über drei Spalten in der letzten Zeile . Jeder der left, centre und right Elemente nimmt eine Spalte in der mittleren Reihe ein .

Jetzt müssen wir diesen Zeilen und Spalten Dimensionen zuweisen . Die Eigenschaften grid-template-columns und grid-template-rows definieren die Größe der Grid-Spur (Zeile oder Spalte).

 .grid-container {Breite: 500px; Höhe: 500px; Anzeige: Gitter; Gitter-Vorlage-Bereiche: "oben oben oben" "links Mitte rechts" "unten unten"; Gitter-Template-Spalten: 100px auto 100px; Rastervorlagen-Zeilen: 50px auto 150px; } 

So sieht unser CSS-Gitter nun aus (mit einigen zusätzlichen Stilen):

Abstand zwischen den Rasterelementen

Sie können Leerzeichen zwischen Spalten und Zeilen hinzufügen, indem Sie grid-column-gap und " grid-row-gap oder die Eigenschaft " grid-gap Langseiten-Eigenschaft verwenden.

 .grid-container {Breite: 500px; Höhe: 500px; Anzeige: Gitter; Gitter-Vorlage-Bereiche: "oben oben oben" "links Mitte rechts" "unten unten"; Gitter-Template-Spalten: 100px auto 100px; Rastervorlagen-Zeilen: 50px auto 150px; Rasterweite: 5px 5px; } 

Unten sehen Sie, dass die Eigenschaft " grid-gap tatsächlich zu Lücken zwischen den Grid-Elementen hinzugefügt hat.

Richten Sie den Rasterinhalt und die Elemente aus

Die Eigenschaft justify-content des Grid-Containers ( .grid-container ) richtet den Inhalt des Rasters entlang der Inline-Achse (horizontale Achse) und den align-content der Eigenschaft align-content und richtet den Inhalt eines Rasters entlang der .grid-container (vertikale Achse) aus . Beide Eigenschaften können einen der folgenden Werte haben : start, end, center, space-between, space-around und space-evenly .

Gegebenenfalls wird die Größe der Spur (Zeile oder Spalte) so verkleinert , dass sie beim Ausrichten dem Inhalt entspricht . Sehen Sie sich die Screenshots von Rasterinhalten an, die mit verschiedenen Werten ausgerichtet sind.

justify-content: start;
justify-content: end; justify-content: center; justify-content: space-between; justify-content: space-around; justify-content: space-evenly; align-content: start; align-content: end; align-content: center; align-content: space-between; align-content: space-around; align-content: space-evenly; Die Eigenschaften justify-content und align-content richten den gesamten Inhalt innerhalb eines Rasters aus .

Verwenden Sie zum Ausrichten einzelner Elemente in ihren Rasterbereichen das andere Paar der Ausrichtungseigenschaften : justify-items und align-items . Beide können einen der folgenden Werte haben: start, end, center, baseline (Elemente entlang der Grundrasterlinie des Bereichs ausrichten) und stretch (Elemente füllen ihre gesamte Fläche aus).

Erstellen Sie JavaScript-basierte Datencharts mit Billboard.js

Erstellen Sie JavaScript-basierte Datencharts mit Billboard.js

Grafiken und Visuals spielen eine wichtige Rolle bei der Verbesserung der Webinhalte. Mit moderner Technologie ist es so einfach, benutzerdefinierte Grafiken wie SVG-Icons in Ihre Seite einzufügen.Aber ein weiteres überraschendes Bild, das Sie von Grund auf neu erstellen können, ist ein Web-Chart.Da

(Tech- und Design-Tipps)

10 Webdesigner, denen du auf Dribbble folgen solltest

10 Webdesigner, denen du auf Dribbble folgen solltest

Dribbble ist eine großartige Gemeinschaft, die Grafikdesigner, mobile Designer, Illustratoren, Künstler, Typografen und Ikonographen beherbergt, die ermutigt werden, ihre besten Arbeiten zu teilen und Feedback zu erhalten. Es ist ein großartiger Ort, um inspiriert zu werden und eine großartige Quelle für frische Ideen. All

(Tech- und Design-Tipps)