CSS Grid Notizen

Stichworte zum Thema CSS Grid zum Nachschlagen

Terminologie

Grid Container

Jedes Element, was display: grid; hat, ist ein Container

Grid Items

Die direkten Kinder von Containern

Grid Lines

Grid Lines werden nummeriert, mit 1 startend (also nicht wie in JavaScript, wo das erste Element den Index 0 hat)

Grid Cell, Grid Track, Grid Area

Bereiche im Grid, von links nach rechts: Cell, Track und Area

Grid Gaps

Eigentlich sind die Zellen Stoß an Stoß. Per gap kann man Abstände definieren. Gaps sind immer durchsichtig.

Grid definieren

Das HTML

Ich gehe im Folgenden von diesem HTML aus

<div id="container">
	<div id="div1">div 1</div>
	<div id="div2">div 2</div>
	<div id="div3">div 3</div>
	<div id="div4">div 4</div>
	<div id="div5">div 5</div>
	<div id="div6">div 6</div>
</div>

Das sieht ohne Grid so aus:

Styles des Containers

grid-template-columns

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

Oder mit 3 Spalten:

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

fr steht für “fraction” und steuert die relativen Größen. 1f 2fr 1fr bedeutet dann, dass die mittlere Spalte doppelt so breit ist wie die äußeren. Jede andere Einheit (px, %, em, vw) ist genauso erlaubt. auto nimmt den vorhandenen Platz.

grid-template-rows

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

Man kann im Grid auch die Zeilen definieren.

Styles der Grid Items

manuelles Platzieren

#container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 2fr 1fr;
}
#div1 {
	grid-column: 2/4;
	grid-row: 1/3;
}

Die Angaben 2/4 und 1/3 bedeuten: “Von der (senkrechten) Grid-Line 2 zur Grid-Line 4 und (waagerecht) von der Grid-Line 1 zur Grid-Line 3”

Überlappungen

#container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
}
#div1 {
	grid-column: 1/3;
	grid-row: 1/3;
}
#div3 {
	grid-column: 2/4;
	grid-row: 2/5;
}

Sie sind selbst verantwortlich dafür, wo genau Sie die divs hinpacken und ob die sich überschneiden oder nicht.

#container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 5fr 1fr;
}
#div1 {
	grid-column: 2/3;
	grid-row: 1/3;
	background-image: url('http://placekitten.com/300/200');
	background-size: cover;
}
#div3 {
	grid-column: 2/3;
	grid-row: 1/3;
}
<div id="div1"></div>

Grid Gaps

#container {
	display: grid;
	grid-template-columns: 1fr 1fr 2fr ;
	grid-template-rows: 3fr 2fr 3fr;
	grid-gap: 10px;
	background-image: url('http://placekitten.com/300/200');
	background-size: cover;
}
#div1 {
	grid-column: 2/4; grid-row: 2/3;
}