Flex’ Schwes­ter: die Grid-Box

Grid-Boxen ähneln in vie­ler Hin­sicht den Flex-Boxen, sind aber spe­zi­ell dar­auf aus­ge­rich­tet, Ele­men­te in zwei Dimen­sio­nen, also einem Ras­ter anzuordnen.

Die fol­gen­de Abbil­dung aus der Mozil­la-Doku­men­ta­ti­on ver­deut­licht eini­ge Grid-Begriffe:

Ele­men­te sind in hori­zon­ta­len Zei­len (rows) und ver­ti­ka­len Spal­ten (colum­ns) ange­ord­net. Dazwi­schen befin­den als Abstand soge­nann­te Rin­nen (gut­ter).

Grid defi­nie­ren

Aus­gangs­punkt ist wie­der ein sehr ein­fa­ches Bei­spiel mit fünf div Boxen in einem div Con­tai­ner. Zur bes­se­ren Sicht­bar­keit sind per css die Hin­ter­grün­de der Zel­len hell­grau ein­ge­färbt und mit Abstän­den und Rän­dern versehen:

<style>
.container > div {
	padding: 0.5rem 1rem;
	background-color: lightgray;
	border: 1px solid gray;
}
</style>
<h1>Grid Beispiel 1</h1>

<div class="container">
	<div>Zelle 1</div>
	<div>Zelle 2</div>
	<div>Zelle 3</div>
	<div>Zelle 4</div>
	<div>Zelle 5</div>
	<div>Zelle 6</div>
	<div>Zelle 7</div>
</div>

Das sieht dann ohne Grid so aus:

Wie bei den Flex-Boxen ist ein Grid schnell defi­niert: ein­fach beim umge­ben­den Con­tai­ner die „dis­play” Eigen­schaft auf „grid” set­zen:

.container {
  display: grid;
}

Das allein bewirkt in der Ansicht aller­dings noch nichts, denn das Stan­dard-Ver­hal­ten des Grids ist es, alle Boxen unter­ein­an­der dar­zu­stel­len. wenn man nicht noch zusätz­liche Vor­ga­ben zu den Dimen­sio­nen der Zei­len und/oder Spal­ten macht. Eine zusätz­liche Zei­le ändert das:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

Damit wer­den pro Zei­le 3 Spal­ten mit fes­ter Brei­te von 200px defi­niert. Das ver­än­dert das Bild so:

Dir Ein­heit „fr”

Zur Anga­be der Spal­ten­brei­te kann man außer abso­lu­ten Grö­ßen­an­ge­ben und Pro­zent­wer­ten auch die Ein­heit „fr” (frac­tion) benut­zen. Ein fr steht für einen Anteil des Plat­zes auf der Grid-Zei­le. Den Spal­ten kön­nen damit (wie mit den Dimen­si­ons­lo­sen Zah­len bei flex) mehr oder weni­ger Antei­le des zur Ver­fü­gung ste­hen­den Plat­zes zuge­wie­sen wer­den. Beispiel:

grid-template-columns: 1fr 2fr 1fr;

Die mitt­le­re Spal­te erhält 2 Breiten.Anteile und wird damit dop­pelt so breit wie die ande­ren Spalten.

Abstän­de

Abstän­de kön­nen zwi­schen Spal­ten (column-gap), Zei­len (row-gap) oder bei­den zugleich (gap) in abso­lu­ten oder Pro­zent­wer­ten ange­ge­ben wer­den (aber nicht in fr). Bei­spiel:

column-gap 1rem;
row-gap 10px;

Das ist äqui­va­lent zu:

gap: 1rem 10px;

und erzeugt fol­gen­de Abstände:

Wie­der­ho­lun­gen

Sich wie­der­ho­len­de Anga­ben kann man mit der repeat-Funk­ti­on ver­ein­fa­chen. Die aus­führ­li­che Version:

grid-template-columns: 200px 200px 200px;

ist also iden­tisch mit:

grid-template-columns: repeat(3, 200px);

Expli­zi­te und impli­zi­te Rasterteile

Die Anga­be von grid-template-columns (und grid-template-rows) defi­niert ein Ras­ter expli­zit für die ange­ge­be­ne Anzahl von Zellen.

Zusätz­liche, über die defi­nier­te Anzahl hin­aus­ge­hen­de Ele­men­te füh­ren zur Erzeu­gung neu­er Zei­len bzw. Spal­ten, dem impli­zi­ten Ras­ter. Ihre Grö­ße wird auto­ma­tisch festgelegt.

Mit grid-auto-rows und grid-auto-columns kann man die Eigen­schaf­ten die­ser zusätz­li­chen impli­zi­ten Ele­men­te steu­ern. Beispiel:

grid-auto-rows: 75px;

Auto­ma­tisch erzeug­te Zei­len erhal­ten dadurch eine Höhe von 75px.

Die min­max() Funktion

Mit der minmax() Funk­ti­on kann man die mini­ma­le und maxi­ma­le Grö­ße fest­le­gen, zwi­schen denen dann die fak­ti­sche Grö­ße je nach Inhalt schwan­ken kann. Der auto Wert stellt dabei die Grö­ße auto­ma­tisch so ein, dass der gesam­te Inhalt sicht­bar ist.

Die fol­gen­de Defi­ni­ti­on stellt die Zei­len­hö­he so ein, dass sie mini­mal 50px und maxi­mal so groß ist, wie der Inhalt es erfordert:

grid-auto-rows: minmax(50px, auto);

Auto­ma­tik

Will man nicht die Spal­ten­brei­te, son­dern die Spal­ten­an­zahl vari­ie­ren, kommt die auto-fit Funk­ti­on in’s Spiel. Sie plat­ziert im Zusam­men­spiel mit repeat so vie­le Ele­men­te auf einer Ach­se, wie die Brei­te des Con­tai­ners es erlaubt. Beispiel:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: minmax(50px, auto);
}

Plat­zie­rung von Elementen

Grid erlaubt es, im Ras­ter Berei­che zu defi­nie­ren die für Ele­men­te reser­viert wer­den. Damit kann man z.B. Kopf- und Fuß­zei­len, Sei­ten­leis­ten und Haupt­be­reich einer Sei­te defi­nie­ren. Der Inhalt wird spä­ter dar­in plat­ziert, indem man die ent­spre­chen­den css-Selek­to­ren verwendet. 

Zur Adres­sie­rung der Berei­che kön­nen fol­gen­de Spal­ten- und Zei­len-Eig­ne­schaf­ten ver­wen­det werden:

• grid-column-start
  Start­spal­te
• grid-column-end
  End­spal­te
• grid-row-start
  Start­zei­le
• grid-row-end
  End­zei­le

Als Argu­men­te erhal­ten die­se Eigen­schaf­ten Zei­len- bzw. Spal­ten­num­mern. Um Tipp­ar­beit zu spa­ren, kann man fol­gen­de Kurz­for­men verwenden:

• grid-column
  Kurz­form für grid-column-start und grid-column-end
• grid-row
  Kurz­form für grid-row-start und grid-row-end

Sie erhal­ten als Argu­ment die jewei­li­ge Start- und End­num­mer der Zei­le bzw. Spal­te getrennt durch einen Schräg­strich. Beispiel:

<style>
.container {
	display: grid;
	grid-template-columns: 1fr 2fr;
  	gap: 10px;
}
.container > div {
	padding: 0.5rem 1rem;
	background-color: lightgray;
	border: 1px solid gray;
}
.oben {
	grid-column: 1 / 3;
	grid-row: 1;
}
.mitte-links {
	grid-column: 1;
	grid-row: 2;
}
.mitte-rechts {
	grid-column: 2;
	grid-row: 2;
}
.unten {
	grid-column: 1 / 3;
	grid-row: 3;
}
</style>
<h1>Grid Beispiel 2</h1>

<div class="container">
	<div class="oben">Oben - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</div>
	<div class="mitte-links">Mitte links - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
	<div class="mitte-rechts">Mitte rechts - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
	<div class="unten">Unten - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</div>
</div>

Grid-Tem­p­la­te-Are­as

Anstel­le der Zei­len- und Spal­ten­num­mern kön­nen auch benann­te Ras­ter­be­rei­che benutzt wer­den. Dafür wer­den in der Eigen­schaft „grid-tem­p­la­te-are­as” die Berei­che des Lay­outs mit ihren frei wähl­ba­ren Namen auf­ge­führt. Der style-Bereich des Bei­spiels oben wür­de dann so aussehen:

<style>
.container > div {
	padding: 0.5rem 1rem;
	background-color: lightgray;
	border: 1px solid gray;
}
.container {
	display: grid;
  	grid-template-areas:
  		"oben oben"
  		"mitte-links mitte-rechts"
  		"unten unten";
	grid-template-columns: 1fr 2fr;
  	gap: 10px;
}
.oben  {
	grid-area: oben;
}
.mitte-links  {
	grid-area: mitte-links;
}
.mitte-rechts  {
	grid-area: mitte-rechts;
}
.unten  {
	grid-area: unten;
}
</style>

Die Dar­stel­lung ist damit iden­tisch zur obi­gen. Fol­gen­de Regeln gelten:

• Alle Zel­len des Ras­ters müs­sen gefüllt werden
• Span­nen sich Berei­che über meh­re­re Zei­len oder Spal­ten, wird der Name in jeder betrof­fe­nen Zei­le bzw. Spal­te wiederholt
• Wenn eine Zel­le leer blei­ben soll, wird ein Punkt (.) als Name verwendet
• Alle Berei­che müs­sen recht­eckig sein (z.B. kei­ne L-Form möglich)
• Berei­che kön­nen nicht an nicht zusam­men­hän­gen­den Orten wie­der­holt werden 

Ver­schach­tel­te Grids

Wie bei Flex-Boxen kön­nen auch Grids belie­big ver­schach­telt wer­den. Dazu wird einem Grid-Ele­ment ein­fach wie­der die display-Eigen­schaft „grid” gege­ben. Inner­halb die­ses Grids gel­ten nur die Defi­ni­tio­nen die­ses Ele­ments; es ist unab­hän­gig von über- oder unter­ge­ord­ne­ten Grids.

---

Quel­len:

• https://​deve​lo​per​.mozil​la​.org/​e​n​-​U​S​/​d​o​c​s​/​L​e​a​r​n​/​C​S​S​/​C​S​S​_​l​a​y​o​u​t​/​G​r​ids