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

gridlines – Die Grenzen zwischen den Feldern
gridlines

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

gridareas – Bereiche im Raster
gridareas

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

Grid Gaps

gridgaps – Die Lücken zwischen den Zellen
gridgaps

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="aussen">
  <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:

Das Ausgangs-HTML
div 1
div 2
div 3
div 4
div 5
div 6

Styles des Containers

grid-template-columns

display: grid;
grid-template-columns: 2fr 1fr;
Grid mit 2 Spalten, verschieden groß
div 1
div 2
div 3
div 4
div 5
div 6

Oder mit 3 Spalten:

display: grid;
grid-template-columns: 1fr 1fr 1fr;
Grid mit 3 Spalten
div 1
div 2
div 3
div 4
div 5
div 6

code>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;
2 Spalten, 3 Zeilen
div 1
div 2
div 3
div 4
div 5
div 6

Man kann im Grid auch die Zeilen definieren.

Styles der Grid Items

manuelles Platzieren

#aussen {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 2fr 1fr;
}
#div1 {
	grid-column: 2/4;
	grid-row: 1/3;
}
Ein Bereich über mehrere Felder
div 1
div 2
div 3
div 4
div 5
div 6

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

#aussen {
	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;
}
Bereiche können sich überlappen
div 1
div 2
div 3
div 4
div 5
div 6

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

#aussen {
	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;
}
2 Bereiche exakt übereinander
div 2
div3
div 4
div 5
div 6

Grid Gaps

#aussen {
	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;
}
Die Lücken sind immer durchsichtig
div 1
div 2
div 3
div 4
div 5
div 6
div 7
div 8