Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Grid Layout
Webdesign

CSS Gitterstruktur: Schnelle Einführung

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
CSS Grid Layout: Fluid Columns and Better Gutters

German (Deutsch) translation by Jorge Montoya (you can also view the original English article)

Die Art wie man das Layout im Netz angeht ändert sich und im Vordergrund dieser Änderung steht die CSS Gitterstruktur (CSS Grid Layout). Diese schnelle Einführung wird alle Details und Nuancen überspringen und wird anstatt Ihnen helfen ranzugehen, ab sofort.

Ihr Browser

Das CSS Grid Layout (bekannt bei seinen Freunden als "Grid") ist noch in Arbeit und dementsprechend werden Sie die Browserunterstützung dafür im Moment noch sehr schwach finden. Um es jetzt zu verwenden, brauchen Sie entweder IE11 (obwohl es eine alte Version der Spezifikation benutzt), Microsoft Edge, Chrome Canary oder Firefox Nightly.

Vielleicht ist der einfachste Ansatz, das Anschalten der Experimental Web Platform features in Chromechrome://flags/#enable-experimental-web-platformfeatures.

Experimental Web Platform features in Google Chrome
Ankilcken

Einrichten eines Rasters

Raster erlauben uns Elemente innerhalb einer Seite auszurichten, in Übereinstimmung mit Regionen, die durch Führungslinien erstellt worden sind.  

Terminologie

Grundsätzlich rahmen diese Führungslinien oder Rasterlinien waagerechte und senkrechte Rasterspuren ein.  Rasterspuren dienen als Zeilen und Spalten mit Rinnen zwischen ihnen. An der Kreuzung der waagerechten und senkrechten Rasterspuren haben wir Zellen ähnlich wie wir es von Tabellen kennen. Diese sind alle sehr wichtige Begriffe zu verstehen.

In der Abbildung unten werden Sie einen Demo-Raster sehen, der zeigt:

  1. Rasterlinien
  2. Spalten
  3. Zeilen
  4. Zellen
A basic grid highlighting grid lines columns rows and cells
Ein Grundraster mit hervorgehobenen Rasterlinien, Spalten, Zeilen und Zellen. 

Es könnte vertrauter aussehen für eine graphische Ausrichtung, wenn wir genau den selben Raster benutzen, aber zermatschen Sie einige Linien um Rinnen zwischen den Inhaltsbereichen zu verschaffen.

  1. Rinnen
Der selbe Raster, aber diesmal hat er eine auffallende Ähnlichkeit mit der Flagge Finlands

Es gibt einen letzten Begriff, den wir klären müssen bevor wir fortfahren: 

  1. Rasterbereich
A grid area
Eins der vielen möglichen Bereiche in unserem Beispielraster

Ein Rasterbereich ist irgendein Teil unseres Rasters eingezäunt von vier Rasterlinien; es kann auch irgendeine Anzahl von Rasterzellen einschließen.

Zeit diesen Raster im Browser zu bauen! Fangen wir mit etwas Markup an.

Rastermarkup

Um den Raster oben abgebildet nachzubauen, brauchen wir einen Container-Element; irgendetwas Sie mögen:

Im Container werden wir neun Kind-Elemente platzieren.

Kopieren Sie diesen Startercode wenn Sie fortfahren möchten. Ich habe einige Grundstile addiert, um jeden Rasteritem visuell voneinander zu unterscheiden.

Gesetze des Rasters

Erstens brauchen wir unser Container-Element als einen Raster festzulegen mit einem neuen Wert für die Eigenschaft display :

Richtig, das war einfach.   Nächst brauchen wir unseren Raster zu definieren mit der Festlegung der Rasterbereiche,sowohl waagerecht als auch senkrecht.  Wir tun dies mit den grid-template-columns und grid-template-rows Eigenschaften:

Sie werden sich fünf Werte für jeder Eigenschaft merken.  Die Werte für grid-template-columns stellen fest, dass "die erste Spalte sollte 150px breit sein, die zweite 20px breit, die dritte 150px breit" und so weiter über fünf Spalten, so ungefähr wie unser dazugehöriges Bild der Flagge Finnlands.  Die fünf Werte für grid-template-rows stellen etwas ähnliches fest. Jeder Wert wäre auto voreingestellt, würde die  Höhe des Inhalts nehmen, aber wir möchten etwas genauerer mit unseren Rinnen sein, indem wir ihnen 20px Höhe geben, deshalb brauchen wir alle füf Zeilen aufzulisten.

Zu jedem unserer Items wurde automatisch einen Raster-Bereich in zeitlicher Reihenfolge zugeordnet.  Es ist nicht schlecht, aber was ist mit Items 2,4 und 7 passiert? Sie sind in die senkrechten Rinnen gefallen, weil unsere Rinnen vollständig legitime Rasterlinien sind und so wird das Raster-Layout annehmen, dass sie da gehören, falls wir nicht spezifischer sind.  Es ist Zeit, unseren Items einige Regeln hinzuzufügen.

Regel der Items

Die verfügbare Syntax kann etwas komplex zu dieser Zeitpunkt wirken, aber wir werden alles als einfach als möglich machen, indem wir eigentlich eine Kurzschrift-Eigenschaft benutzen. Wir werden mit unserem ersten Item anfangen, mit der Deklaration, dass wir ihn mit grid-column 1 und grid-row 1 beginnen möchten:

Unser Item wird automatisch den Minimum an verfügbaren Platz zwischen Rasterlinien füllen. Unser zweiter Item ist etwas weniger eindeutig. Wir möchten den auch in grid-row 1 beginnen, aber wir möchten ihn anstatt auf grid-column 2 zu beginnen, auf grid-column 3 zu starten. Spalte 2 wird leer bleiben, so können wir unsere Rinnen formen. 

Wir fahren auf dieser Weise fort, mit Sprüngen über unseren Rinnen, Spalten und Zeilen und schließlich mit unserem neunten Item:

Schlussfolgerung

Das ist es, Sie verstehen und verwenden Grid! Fassen wir die vier Grundschritte zusammen:

  1. Erstellen Sie einen Container-Element und legen Sie es fest display: grid;
  2. Verwenden Sie den selben Container, um die Rasterlinien mit den Eigenschaften grid-template-columns und grid-template-rows zu definieren
  3. Platzieren Sie Kind-Elemente innerhalb des Containers.
  4. Seien Sie spezifisch über die Platzierung jedes Kind-Elementes auf dem Raster mit der Deklaration ihrer grid-column und grid-row.

Im nächsten Abschnitt dieser Reihenfolge werden wir die Raster-Syntax tiefer beobachten, die Art und Weise wie wir unsere Rinnendefinition nachbessern, flexiblere Layouts erforschen, die fr Einheit, die repeat() Funktion, und werden unseren einfachen Raster viel weiterbringen.  Wir sehen uns dort!

Brauchbare Grid Ressourcen

  • @rachelandrew folgen Sie Rachel Andrew und Sie sind schon ziemlich eingestellt.
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.