So wählen Sie das richtige Fundamentraster aus

In dem heutigen Video werden wir über die drei Rastersysteme sprechen, die sich derzeit im Rahmen der ZURB Foundation befinden. Wir werden genauer untersuchen, welche wir in verschiedenen Situationen verwenden sollten. Lass uns rein springen!

Wir haben einen umfassenden Leitfaden erstellt, der Sie beim Erlernen der Grundlagen unterstützen soll, unabhängig davon, ob Sie gerade erst anfangen oder fortgeschrittenere Themen kennenlernen möchten Lernen Sie die Stiftung.

Ein Foundation Grid auswählen

1. Das Float-Gitter

Das erste und am längsten dienende der Foundation-Netze ist das Float-Netz. Wie der Name vermuten lässt, verwendet er Float-Spalten zum Erstellen von Layouts.

Das Markup ist Ihnen wahrscheinlich bekannt; Es verwendet dieselbe Zeilen- und Spaltenstruktur, die auf anderen Systemen gefunden wird:

 
2
 
10
 
 
 
3
 
9
 

2. Das Flex-Gitter

Das zweite Beispiel wurde in Foundation 6 eingeführt und heißt "Flexgitter". Es wird von CSS flexbox unterstützt. Obwohl es sich sehr ähnlich wie das flache Raster verhält, verfügt es über einige einzigartige Merkmale wie vertikale und horizontale Ausrichtung und automatische Größenanpassung.

Das Markup entspricht genau dem Float-Raster. Sie definieren Zeilen und Spalten, und mithilfe spezieller Klassen können Sie die Größe dieser Spalten bestimmen. Da dieses Grid jedoch auf Flexbox basiert, können wir auf einige erweiterte Funktionen zugreifen. Autosizing ist eine solche Funktion. Wenn wir eine Größenklasse für eine Spalte auslassen, wird sie erweitert, um den verfügbaren Platz zu füllen:

 
2
 
keine Größenbestimmung
 
 
 
3
 
keine Größenbestimmung
 

Alternativ können Sie auch a schrumpfen Klasse verkleinert die Spalte auf die minimale Größe, die der Inhalt benötigt:

 
2
 
schrumpfen
 
 
 
3
 
schrumpfen
 

Weitere Beispiele finden Sie im Screencast oben.

3. Das XY-Gitter

Unser drittes Beispiel ist das jüngste Raster (und meiner Meinung nach das beeindruckendste). das in Foundation 6.4 eingeführte XY-Gitter. Obwohl es auch von flexbox angetrieben wird, weist es einige Ähnlichkeiten mit dem Flex-Gitter auf, aber es gibt auch einige große Unterschiede.

Der erste wesentliche Unterschied besteht darin, dass das XY-Gitter Objekte sowohl horizontal als auch vertikal rendern kann.

Der zweite Unterschied ist das Markup. Hier definieren wir ein Containerelement (entweder mit der Klasse Raster-x oder Gitter-y) und dann mit füllen Zelle Elemente:

 
4
 
2
 
6
 

Standardmäßig gibt es überhaupt keine Rinne, daher sitzen alle Zellen bündig mit den umgebenden Zellen. Stattdessen definieren wir die Rinne auf der Raster-x Element: Rasterrand-x oder Gitterauffüllung-x (Ersetzen der x Für ein y wenn es sich um ein vertikales Gitter handelt). Die Werte, die diese Überträge enthalten, können mithilfe der Sass-Variablen festgelegt werden $ Gitterrandrinnen und $ gitter-padding-rinnen beziehungsweise. 

Welches Foundation Grid solltest du wählen?

Bei der Auswahl des zu verwendenden Gitters sollte die Entscheidung anhand einiger Faktoren getroffen werden.

1. Die Browser-Unterstützung ist am wichtigsten, da Flexbox keine universelle Unterstützung bietet (IE ist in diesem Fall der fragwürdige Browser). Das Float-Raster ist von der Flexbox-Unterstützung in Browsern nicht betroffen.
2. Zweitens, benötigen Sie ein vertikales Rasterlayout? Wenn ja, müssen Sie sich für das XY-Gitter entscheiden.
3. Wie wichtig ist Ihnen schließlich die Codeschreibgeschwindigkeit und -wartung? Das XY-Grid verwendet eine viel einfachere Syntax als seine Vorgänger, sodass es wesentlich einfacher ist, damit zu arbeiten.

Weitere Informationen finden Sie im Screencast oben oder in meinen neuesten Kursen!

• Lernen Sie den Foundation XY Grid Tuts + Course kennen
• Advanced Foundation: Verwenden des ZURB Stack Tuts + -Kurses
• Erste Schritte mit Foundation Building Blocks Tuts + Course