Das XY Grid-System in Foundation

Das XY-Grid ist ein vollständig überarbeitetes neues Grid-System seit Foundation Version 6.4, das die ganze Vielfalt in Form von mehreren Grid-Typen enthält, einschließlich margin grid, padding grid, frame grid, block grid und vertical grid.

Das XY-Grid funktioniert sehr ähnlich wie das Standard-Float-Grid, enthält jedoch einige nützliche Funktionen, die nur mit Flexbox möglich sind, wie horizontale und vertikale Ausrichtung, automatische Größenanpassung und ein vollständig vertikales Grid.

Browser-Unterstützung

Das XY-Grid wird in Chrome, Firefox, Safari 6+, IE10 +, Edge, iOS 7+ und Android 4.4+ unterstützt. Flexbox wird in Android 2, IE10 und IE11 unterstützt, ist aber in der Ausführung dieses Grid-Systems nicht ausreichend zuverlässig. (Tabelle zur Flexbox-Browser-Unterstützung. ) Es wird empfohlen, das XY-Grid nur für Projekte zu verwenden, die auf die Unterstützung älterer Browser verzichten können. Das ist z.B. dann der Fall, wenn du deine Besucher aus Sicherheitsgründen immer empfiehlst, die aktuellsten Browser zu benutzen.

Die Grundlage

Die Struktur des XY-Grids verwendet die Klassen .grid-x, .grid-y und .cell als Grundlage. Wenn du keinen Grid-Typ (gutter type) definierst, teilen die Zellen den vorhandenen Raum einfach ohne Abstände auf.

<div class="grid-x">
	<div class="cell">full width cell</div>
	<div class="cell">full width cell</div>
</div>
<div class="grid-x">
	<div class="cell small-6">6 cells</div>
	<div class="cell small-6">6 cells</div>
</div>
<div class="grid-x">
	<div class="cell medium-6 large-4">12/6/4 cells</div>
	<div class="cell medium-6 large-8">12/6/8 cells</div>
</div>

full width cell

6 cells

12/6/4 cells

12/6/8 cells

Grid-Typen für Zell-Abstände

Das definierende Merkmal des XY-Grids ist die Fähigkeit, innere und äußere Zell-Abstände in Harmonie zu verwenden. Um einen Grid-Typ zu definieren, gibst du einfach .grid-margin-x oder .grid-padding-x für den Grid-Bereich an.

<div class="grid-x grid-margin-x">
	<div class="cell medium-6 large-4">12/6/4 cells</div>
	<div class="cell medium-6 large-8">12/6/8 cells</div>
</div>
<div class="grid-x grid-padding-x">
	<div class="cell medium-6 large-4">12/6/4 cells</div>
	<div class="cell medium-6 large-8">12/6/8 cells</div>
</div>

12/6/4 cells

12/6/8 cells

12/6/4 cells

12/6/8 cells

Grid-Container

Das Grid nimmt standardmäßig die volle Breite des verfügbaren Raumes ein. Um die maximale Breite zu begrenzen, verwendest du die Klasse .grid-container. Der Container wird zentriert und hat eine maximale Breite, die Ihrer $grid-container-Einstellung entspricht (standardmäßig 1.200px), zusammen mit den inneren Abständen links und rechts, die der Hälfte Ihrer $grid-container-padding-Einstellung entspricht.

<div class="grid-container">
	<div class="grid-x grid-margin-x">
		<div class="cell small-4">cell</div>
		<div class="cell small-4">cell</div>
		<div class="cell small-4">cell</div>
	</div>
</div>

cell

Grid Container Fluid

Um den Inhalt auf die volle Breite des verfügbaren Raumes auszudehnen, fügst du einfach die Klasse .fluid zu deinem .grid-container hinzu.

<div class="grid-container fluid">
	<div class="grid-x grid-margin-x">
		<div class="cell small-4">cell</div>
		<div class="cell small-4">cell</div>
		<div class="cell small-4">cell</div>
	</div>
</div>

cell

Grid Container Full

Um den Inhalt auf die volle Breite des verfügbaren Raumes auszudehnen und auch den Grid-Container-Padding zu entfernen, fügst du einfach die Klasse full zu deinem .grid-container hinzu. Beachte, dass diese Variante in erster Linie für die Klasse .grid-margin-x verwendet wird - sie funktioniert auch mit der Klasse .grid-padding-x, funktioniert aber genauso wie die Klasse .grid-container.fluid.

Bitte beachte, dass du bei der Verwendung von .grid-margin-x auf einem .grid-container mit der Klasse .full auch den horizontalen Überlauf ausblenden musst, damit dieser richtig funktioniert, wenn dein Inhalt die Begrenzung des Displays berührt.

Der beste Weg, dies umzusetzen, ist: body {overflow-x: hidden;}

<div class="grid-container full">
	<div class="grid-x grid-margin-x">
		<div class="cell small-4">cell</div>
		<div class="cell small-4">cell</div>
		<div class="cell small-4">cell</div>
	</div>
</div>

cell

Automatische Anpassungen

Wenn die Klasse .auto oder .[size]-auto zur Zelle hinzugefügt wird, belegt sie den restlichen Raum.

<div class="grid-x grid-margin-x">
	<div class="cell small-4">4 cells</div>
	<div class="cell auto">Der Rest!</div>
</div>

4 cells

Der Rest!

Mehrere expandierende Zellen teilen sich den restlichen freien Platz gleichmäßig auf.

<div class="grid-x grid-margin-x">
	<div class="cell small-4">4 cells</div>
	<div class="cell auto">Der erste Rest!</div>
	<div class="cell auto">Der zweite Rest!</div>
</div>

4 cells

Der erste Rest!

Der zweite Rest!

Eine Zelle kann auch verkleinert werden, indem die Klasse .shrink oder .[size]-shrink hinzugefügt wird. Dies bedeutet, dass es nur den Platz einnimmt, den sein Inhalt benötigt.

<div class="grid-x grid-margin-x">
	<div class="cell shrink">geschrumpft</div>
	<div class="cell auto">Der Rest!</div>
</div>

geschrumpft

Der Rest!

Responsive Anpassungen

Verwende die Klassen .[size]-auto oder .[size]-shrink, um von einem Prozentsatz- oder Verkleinerungsverhalten zum automatischen Verhalten zurückzukehren. Im folgenden Beispiel stapeln sich die Zellen auf kleinen Bildschirmen übereinander und werden auf großen Bildschirmen gleich breit dargestellt.

<div class="grid-x">
	<div class="cell large-auto">Eins</div>
	<div class="cell large-auto">Zwei</div>
	<div class="cell large-auto">Drei</div>
	<div class="cell large-auto">Vier</div>
	<div class="cell large-auto">Fünf</div>
	<div class="cell large-auto">Sechs</div>
</div>

Eins

Zwei

Drei

Vier

Fünf

Sechs

Zellen-Abstände entfernen

Mit der Klasse .[size]-[gutter-type]-collapse kannst du Zellen-Abstände entfernen. Es gibt Situationen, in denen du nicht möchtest, dass für jede Displaygröße Abstände vorhanden sein sollen. Gebe in diesem Fall die gewünschte Displaygröße und den Abstandstyp (gutter-type) an und füge die collapse-Klasse deinem Grid-Element hinzu. Das folgende Beispiel zeigt Abstände bei kleinen und keine Abstände bei mittleren und höheren Displaygrößen an.

<div class="grid-x grid-margin-x medium-margin-collapse">
	<div class="cell small-6">
	Äußerer Abstand bei Small, kein äußerer Abstand ab Medium.
	</div>
	<div class="cell small-6">
	Äußerer Abstand bei Small, kein äußerer Abstand ab Medium.
	</div>
</div>

Äußerer Abstand bei Small, kein äußerer Abstand ab Medium.

Offsets

Offsets funktionieren, indem Sie den margin-left (oder margin-top für ein vertikales Raster) auf ein Grid anwenden.

<div class="grid-x grid-margin-x">
	<div class="cell small-4 large-offset-2">Offset 2 bei Large</div>
	<div class="cell small-4">4 Zellen</div>
</div>

Offset 2 bei Large

4 Zellen

Grid Blöcke

Anstatt für jede einzelne Zelle die gleiche Zellbreite für jede Displaygröße zu definieren, brauchst du es nur einmal für jede Displaygröße angeben. Um dies zu definieren, fügst du die Klasse .[size]-up-[n] zu einem .grid-x oder .grid-y hinzu, wobei [n] die Anzahl der Zellen angibt, die in jeder Reihe angezeigt werden soll. Und [size] ist die Displaygröße, an dem der Effekt angewendet werden soll.

In diesem Beispiel wird .grid-padding-x verwendet, aber es kann auch mit .grid-margin-x benutzt werden.

<div class="grid-x grid-padding-x small-up-2 medium-up-4 large-up-6">
	<div class="cell">Eins</div>
	<div class="cell">Zwei</div>
	<div class="cell">Drei</div>
	<div class="cell">Vier</div>
	<div class="cell">Fünf</div>
	<div class="cell">Sechs</div>
</div>

Eins

Zwei

Drei

Vier

Fünf

Sechs

Vertikale Grids

Das XY-Grid unterstützt auch vertikale Grids. Wenden Sie hierbei einfach .grid-y anstelle von .grid-x an. Die vorhandenen Zellen werden automatisch verschoben, um einen vertikalen und keinen horizontalen Abstand bereitzustellen.

Du kannst auch margin oder padding mit .grid-margin-y und .grid-padding-y anwenden, um äußere und innere Abstände am oberen und unteren Rand von Zellen anzuwenden.

Bitte beachte, dass bei vertikalen Grids das Grid eine Höhe benötigt. Du kannst auch einen Grid Frame verwenden, um ein Grid mit 100vh zu erstellen (oder 100%, wenn verschachtelt).

<div class="grid-y" style="height: 500px;">
	<div class="cell small-6 medium-8 large-2">
	6/8/2
	</div>
	<div class="cell small-6 medium-4 large-10">
	6/4/10
	</div>
</div>

6/8/2

6/4/10

Grid Frame

Das XY-Grid enthält den Grid Frame von Foundation for Apps sowie viele andere nützliche Funktionen. Füge .grid-frame zum Grid hinzu, um es zu verwenden. Dies setzt das Grid auf 100vh (die volle Höhe des Browserfensters).

Bitte beachten Sie, um .grid-margin-x oder .grid-margin-y mit .grid-frame zu verwenden, dass Sie den overflow des bodys wie folgt ausblenden müssen: body {overflow: hidden;}. Achte jedoch darauf, bei der Verwendung von .medium-grid-frame, dass der Inhalt versehentlich auf kleinen Bildschirmen nicht angezeigt wird.

Hier ist ein Beispiel dafür, wie du es verwenden kannst:

<div class="grid-y medium-grid-frame">
	<div class="cell shrink header medium-cell-block-container">
	<h1>Grid Frame Header</h1>
		<div class="grid-x grid-padding-x">
			<div class="cell medium-4">
			A medium 4 cell
			</div>
			<div class="cell medium-4 medium-cell-block">
			<p style="width:80vw;">A medium 4 cell block... on medium this content should overflow and let you horizontally scroll across... one might use this for an array of options</p>
			</div>
			<div class="cell medium-4">
			A medium 4 cell
			</div>
		</div>
	</div>
	<div class="cell medium-auto medium-cell-block-container">
		<div class="grid-x grid-padding-x">
			<div class="cell medium-4 medium-cell-block-y">
			<h2>Independent scrolling sidebar</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacus odio, accumsan id ullamcorper eget, varius nec erat. Nulla facilisi. Donec dui felis, euismod nec finibus vitae, dapibus quis arcu. Maecenas tempor et ipsum quis venenatis. Ut posuere sed augue sit amet efficitur. Sed imperdiet, justo id tempus rhoncus, est est viverra turpis, non vulputate magna lectus et nisl. Pellentesque ultrices porttitor vehicula. Ut aliquet efficitur ligula, a consectetur felis. Proin tristique ut augue nec luctus. Curabitur a sapien pretium, auctor elit a, efficitur erat. Donec tincidunt dui vel velit bibendum euismod. Cras vitae nibh dui. Aliquam erat volutpat. Etiam sit amet arcu a erat efficitur facilisis. Ut viverra dapibus turpis, et ornare justo. Integer in dui cursus, dignissim tortor a, hendrerit risus.</p>
			<p>Suspendisse pulvinar, massa iaculis feugiat lobortis, dolor sapien vestibulum nulla, vel cursus tellus leo in lorem. Aliquam eu placerat urna. Suspendisse sed viverra orci, ut mattis neque. Fusce non ultrices nisi. In sagittis varius mollis. Quisque dolor quam, consectetur eu lacinia ac, ullamcorper vel arcu. Nullam mattis imperdiet nulla sed ornare. Praesent tristique, est id eleifend vestibulum, neque nibh condimentum ex, nec lobortis purus justo a libero. Phasellus id ex ac nunc hendrerit hendrerit. Nullam urna ipsum, rutrum at fringilla vel, venenatis non purus. Maecenas egestas ex vitae venenatis molestie. Ut et odio egestas, accumsan neque et, viverra nisl. Sed faucibus nec nulla sed imperdiet. Fusce quis sem ac urna semper tempor a id elit. Nulla fringilla vitae sapien a vehicula.</p>
			</div>
			<div class="cell medium-8 medium-cell-block-y">
			<h2>Independent scrolling body</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacus odio, accumsan id ullamcorper eget, varius nec erat. Nulla facilisi. Donec dui felis, euismod nec finibus vitae, dapibus quis arcu. Maecenas tempor et ipsum quis venenatis. Ut posuere sed augue sit amet efficitur. Sed imperdiet, justo id tempus rhoncus, est est viverra turpis, non vulputate magna lectus et nisl. Pellentesque ultrices porttitor vehicula. Ut aliquet efficitur ligula, a consectetur felis. Proin tristique ut augue nec luctus. Curabitur a sapien pretium, auctor elit a, efficitur erat. Donec tincidunt dui vel velit bibendum euismod. Cras vitae nibh dui. Aliquam erat volutpat. Etiam sit amet arcu a erat efficitur facilisis. Ut viverra dapibus turpis, et ornare justo. Integer in dui cursus, dignissim tortor a, hendrerit risus.</p>
			<p>Suspendisse pulvinar, massa iaculis feugiat lobortis, dolor sapien vestibulum nulla, vel cursus tellus leo in lorem. Aliquam eu placerat urna. Suspendisse sed viverra orci, ut mattis neque. Fusce non ultrices nisi. In sagittis varius mollis. Quisque dolor quam, consectetur eu lacinia ac, ullamcorper vel arcu. Nullam mattis imperdiet nulla sed ornare. Praesent tristique, est id eleifend vestibulum, neque nibh condimentum ex, nec lobortis purus justo a libero. Phasellus id ex ac nunc hendrerit hendrerit. Nullam urna ipsum, rutrum at fringilla vel, venenatis non purus. Maecenas egestas ex vitae venenatis molestie. Ut et odio egestas, accumsan neque et, viverra nisl. Sed faucibus nec nulla sed imperdiet. Fusce quis sem ac urna semper tempor a id elit. Nulla fringilla vitae sapien a vehicula.</p>
			<p>Nullam vestibulum lorem nec lectus egestas, nec ullamcorper diam maximus. Maecenas condimentum, nibh at blandit semper, ex erat tempus magna, id maximus neque velit accumsan nibh. Aenean dignissim lorem eu nisl laoreet vestibulum. Vivamus efficitur et augue vitae tincidunt. Etiam et magna felis. Integer mattis, nisi aliquet scelerisque blandit, ex mi sodales ante, eget accumsan quam magna et ligula. Curabitur id tristique leo. Proin rutrum mi vitae enim rhoncus, at cursus neque eleifend. Integer ultrices volutpat tellus ac porta. Fusce sollicitudin venenatis lacinia. Fusce ante lorem, gravida semper varius non, pharetra non erat. Sed dapibus arcu turpis, ac sollicitudin nibh lacinia vel. Nullam at enim porta, luctus metus sit amet, rutrum odio. Cras tempor enim vel pellentesque sollicitudin. Maecenas ullamcorper, sem non accumsan volutpat, neque tortor pulvinar orci, ut ultrices ligula lorem ut risus.</p>
			<p>Aliquam facilisis, nibh eget posuere suscipit, arcu sapien iaculis odio, in molestie dolor lectus vitae sem. Cras id nunc mollis mi rutrum dapibus. Quisque rutrum a augue at scelerisque. Praesent faucibus ac enim vitae gravida. Sed et sodales elit. Duis magna lectus, interdum sit amet metus a, sagittis varius magna. Proin nibh lectus, egestas a luctus ut, dapibus et enim. Curabitur fringilla ipsum vitae nunc imperdiet consectetur eget non neque. Suspendisse ultricies odio quis lorem vulputate, ac vulputate turpis feugiat. Maecenas posuere rhoncus orci, in ornare velit suscipit tempor. Curabitur pretium nisl id lorem placerat consequat. In quis quam eros. Nam mattis elit eu quam sagittis, in varius erat tempor.</p>
			<p>Fusce felis magna, pellentesque eget mollis a, rutrum id eros. Curabitur auctor varius arcu a consequat. Phasellus quis pulvinar enim, eu ultricies justo. Pellentesque risus libero, dapibus at erat ultricies, gravida varius erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla tempus, justo ut laoreet mollis, nunc tellus convallis urna, vel pretium dui velit eget ligula. Aliquam semper sed nulla a molestie. Maecenas at egestas massa, vitae aliquam mi. Fusce nec sem egestas, pretium lacus non, tincidunt sapien. Sed tristique odio at ultricies vulputate. Integer et convallis augue, eu aliquam enim. Mauris ut faucibus diam. Donec vulputate nunc sed congue accumsan. Etiam lobortis nisi quis lacinia pharetra.</p>
			</div>
		</div>
	</div>
	<div class="cell shrink footer">
	<h3>Here's my footer</h3>
	</div>
</div>

Independent scrolling sidebar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacus odio, accumsan id ullamcorper eget, varius nec erat. Nulla facilisi. Donec dui felis, euismod nec finibus vitae, dapibus quis arcu. Maecenas tempor et ipsum quis venenatis. Ut posuere sed augue sit amet efficitur. Sed imperdiet, justo id tempus rhoncus, est est viverra turpis, non vulputate magna lectus et nisl. Pellentesque ultrices porttitor vehicula. Ut aliquet efficitur ligula, a consectetur felis. Proin tristique ut augue nec luctus. Curabitur a sapien pretium, auctor elit a, efficitur erat. Donec tincidunt dui vel velit bibendum euismod. Cras vitae nibh dui. Aliquam erat volutpat. Etiam sit amet arcu a erat efficitur facilisis. Ut viverra dapibus turpis, et ornare justo. Integer in dui cursus, dignissim tortor a, hendrerit risus.

Suspendisse pulvinar, massa iaculis feugiat lobortis, dolor sapien vestibulum nulla, vel cursus tellus leo in lorem. Aliquam eu placerat urna. Suspendisse sed viverra orci, ut mattis neque. Fusce non ultrices nisi. In sagittis varius mollis. Quisque dolor quam, consectetur eu lacinia ac, ullamcorper vel arcu. Nullam mattis imperdiet nulla sed ornare. Praesent tristique, est id eleifend vestibulum, neque nibh condimentum ex, nec lobortis purus justo a libero. Phasellus id ex ac nunc hendrerit hendrerit. Nullam urna ipsum, rutrum at fringilla vel, venenatis non purus. Maecenas egestas ex vitae venenatis molestie. Ut et odio egestas, accumsan neque et, viverra nisl. Sed faucibus nec nulla sed imperdiet. Fusce quis sem ac urna semper tempor a id elit. Nulla fringilla vitae sapien a vehicula.

Independent scrolling body

Nullam vestibulum lorem nec lectus egestas, nec ullamcorper diam maximus. Maecenas condimentum, nibh at blandit semper, ex erat tempus magna, id maximus neque velit accumsan nibh. Aenean dignissim lorem eu nisl laoreet vestibulum. Vivamus efficitur et augue vitae tincidunt. Etiam et magna felis. Integer mattis, nisi aliquet scelerisque blandit, ex mi sodales ante, eget accumsan quam magna et ligula. Curabitur id tristique leo. Proin rutrum mi vitae enim rhoncus, at cursus neque eleifend. Integer ultrices volutpat tellus ac porta. Fusce sollicitudin venenatis lacinia. Fusce ante lorem, gravida semper varius non, pharetra non erat. Sed dapibus arcu turpis, ac sollicitudin nibh lacinia vel. Nullam at enim porta, luctus metus sit amet, rutrum odio. Cras tempor enim vel pellentesque sollicitudin. Maecenas ullamcorper, sem non accumsan volutpat, neque tortor pulvinar orci, ut ultrices ligula lorem ut risus.

Aliquam facilisis, nibh eget posuere suscipit, arcu sapien iaculis odio, in molestie dolor lectus vitae sem. Cras id nunc mollis mi rutrum dapibus. Quisque rutrum a augue at scelerisque. Praesent faucibus ac enim vitae gravida. Sed et sodales elit. Duis magna lectus, interdum sit amet metus a, sagittis varius magna. Proin nibh lectus, egestas a luctus ut, dapibus et enim. Curabitur fringilla ipsum vitae nunc imperdiet consectetur eget non neque. Suspendisse ultricies odio quis lorem vulputate, ac vulputate turpis feugiat. Maecenas posuere rhoncus orci, in ornare velit suscipit tempor. Curabitur pretium nisl id lorem placerat consequat. In quis quam eros. Nam mattis elit eu quam sagittis, in varius erat tempor.

Fusce felis magna, pellentesque eget mollis a, rutrum id eros. Curabitur auctor varius arcu a consequat. Phasellus quis pulvinar enim, eu ultricies justo. Pellentesque risus libero, dapibus at erat ultricies, gravida varius erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla tempus, justo ut laoreet mollis, nunc tellus convallis urna, vel pretium dui velit eget ligula. Aliquam semper sed nulla a molestie. Maecenas at egestas massa, vitae aliquam mi. Fusce nec sem egestas, pretium lacus non, tincidunt sapien. Sed tristique odio at ultricies vulputate. Integer et convallis augue, eu aliquam enim. Mauris ut faucibus diam. Donec vulputate nunc sed congue accumsan. Etiam lobortis nisi quis lacinia pharetra.