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

CSS Rasterlayout: Fliessende Spalten und Bessere Rinnen

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
CSS Grid Layout: A Quick Start Guide
CSS Grid Layout: Using Grid Areas

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

In dieser Anleitung werden wir den Raster von der vorigen Anleitung nehmen und werden ihn als Spielplatz benutzen, um Grid weiter zu untersuchen.   Wir werden die Art verbessern, wie wir unsere Rinnen definieren, flexible Layouts, die fr Einheit erkunden und die repeat() Funktion  einführen.

Flexible Einheiten

Der ganze Sinn von Grid ist uns zu erlauben, das Layout im Web ordnungsgemäss zu kontrollieren, deshalb werden wir unseren statischen Raster fliessend machen bevor wir fortfahren.  Wenn Sie sich erinnern, haben wir unseren Raster mit statischen Pixel-Masseinheiten definiert: 

Es ist möglich hier auch andere Eiheiten zu verwenden, wie ems oder rems zum Beispiel.  Oder sogar aussergewöhnlichere Einheiten wie vh und vmin.

In diesem Fall werden wir unsere Pixeleinheiten für Prozentsätze tauschen.  Da wir unsere Spaltenbreiten und unsere Rinner per Hand definieren, müssen wir sicherstellen, dass der Gesamtwert gleich 100% ist:

Beachten Sie den Abstand

Es existiert eine neue, effizientere Form, die Rinnenmessungen zu deklarieren und das ist mit einer speziell gefertigten Eigenschaft. Wir können die grid-column-gap oder die grid-row-gap Eigenschaften benutzen oder die Kurzschrift-Eigenschaft grid-gap stattdessen benutzen.

Mit diesen Mitteln brauchen wir keine Rasterlinien mehr einzuführen, um unsere Rinnen anzupassen, wir brauchen nur Spalten und Zeilen zu deklarieren, also in unserem Fall bedeutet das nur drei von jeder einzelnen:

Hmm, es ist etwas unordentlich, aber es tut eigentlich die Arbeit. Der Unterschied, den Sie merken werden ist, dass Spaltenbreiten jetzt 100% zusammenrechnen; die Rinnen werden eigentlich davon abgezogen.

Repeat

Schreiben wir es in eine saubere Form, indem wir die repeat() Funktion verwenden:

Die Angabe ist "wiederhol 33.33% dreimal" und gib uns drei Spalten. Und wir brauchen sogar die grid-template-rows Deklaration nicht, weil der auto Wert sowieso als Defaultwert eingestellt ist. Jetzt brauchen wir festzustellen wie gross wir unsere Rinnen haben möchten.

grid-gap wird flexible oder fixe Einheiten akzeptieren, was auch bedeutet, dass wir durchaus fliessende Spalten mit fixen Rinnen kombinieren können, ohne irgendwelche komplexe Rechnungen tätigen zu müssen.

Beim Zurücksetzten unserer grid-column und grid-row Werte

Etwas stimmt hier nicht: wir haben immernoch eine Menge grid-column und grid-row Deklarationen in unseren Raster-Items, aber sie sind alle falsch, weil wir so viele Rasterlinien nicht mehr haben  Glücklicherweise, weil wir grid-gap für die Rinnendeklaration benutzen, können wir die Platzierung von Items der automatischen Platzierung hinterlassen - Items werden nicht mehr in die Rinnen fallen. An dieser Stelle, entfernen Sie die ganze Platzierungen:

Die fr Einheit

Eine letzte Steigerung kann zu unserem einfachen Raster zugefügt werden; wir werden die fr oder Bruchteil-Einheit einführen. Eine einzige fr Einheit stellt "ein Teil von jedoch vielen Teilen, in die wir dies gespaltet haben". Zum Beispiel könnten wir unsere Spalten hiermit deklarieren:

Hier gibt es eine Gesamtzahl von drei fr Einheiten, also würde jede Spalte ein Drittel breit. Hier ist ein anderes Beispiel:

Jetzt gibt es eine Gesamtzahl von vier fr Einheiten, d.h. die erste Spalte würde die Hälfte der verfügbaren Breite für sich nehmen, mit den anderen zwei Spalten, die jede ein Viertel nehmen würden. 

Diese Einheiten sind wirklich sehr stark, besonders in Kombination mit anderen Masseinheiten:

Hier haben wir vier Spalten deklariert:

  • Die erste wurde mit 300px festgesetzt
  • die letzte hat eine flexible Breite von 20% des Raster-Container-Elements 
  • dann werden die fr Einheiten gerechnet, indem die zweite Spalte ein Teil des übrigen Platzes ausfüllt
  • und die dritte Spalte wird dann drei Teilen einnehmen.

Es sieht so aus, die automatische Platzierung wird perfekt hervorgehoben, da unsere neun Items sich bewegt haben, um alle Lücken auszufüllen:

Aber zurück zu unserem Anfangsraster. Ersetzen wir den plumpen und ungenauen Wert 33.33% durch 1fr

Endergebnis:

Schlussfolgerung

Also, zusammengefasst:

  1. Grid wird flexible Einheiten in Kombination mit fixen Masseinheiten akzeptieren.
  2. Wir brauchen nicht Rinnen in unserer grid-template zu deklarieren, wir können stattdessen die grid-gap Eigenschaften verwenden. 
  3. grid-gap bedeutet, dass wir nicht so sehr an die Platzierung unserer Raster-Items gebunden sind -- wir können die automatische Platzierung mehr Verantwortung überreichen. 
  4. Die repeat() Funktion wird uns Zeit sparen und unsere Stylesheets wartbar halten.
  5. Die fr oder Bruchteil-Einheit ist eine mächtige Art, Rastervorlagen zu beschreiben.

Wir haben einen langen Weg in nur zwei Anleitungen zurückgelegt, aber Sie sind jetzt der stolze Besitzer eines sehr ordentlichen und  präzisen Rasters! In der nächsten Anleitung werden wir Rasterbereiche erforschen, mit einem Blick auf das Stichwort span und einige praktische Layouts.

Nutzbare Ressourcen

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.