Nicos Garden

Grid

3 min read

CSS Eigenschaften

EigenschaftBeschreibung
display: grid;Legt das Element als Grid-Container fest
grid-template-columsLegt die Anzahl und Breite der Spalten fest. Die Breite der Spalten muss durch Leerzeichen getrennt angegeben werden.
Entweder die Breite jeder Spalte nacheinander angeben, oder mit Repeat
grid-template-rowsLegt die Höhe und Anzahl der Zeilen fest.
Entweder die Höhe jeder Reihe nacheinander angeben, oder mit Repeat
column-gapAbstand zwischen den Spalten
row-gapAbstand zwischen den Zeilen
justify-itemsrichtet alle Elemente eines Grids horizontal aus.
align-itemsrichtet alle Elemente eines Grids vertikal aus.
grid-columnAn welcher Position das Element angezeigt wird.
Mit / kann von bis angegeben werden.
grid-rowAn welcher Position das Element angezeigt wird.
Mit / kann von bis angegeben werden.
grid-template-areasPro Zeile einen String angeben, hier können jeweils die Spalten stehen z.B.: "h h h"
"left content right"
"footer footer footer"
grid-areaHier wird die ID für grid-template-areas angegeben z.B. content

Werte für columns und rows

ValueBeschreibung
autoDie Breite/Höhe wird an den Inhalt angepasst
1frDer Bereich wird in die gesamte Anzahl der Teile pro Zeile aufgeteilt und danach die Breite der einzelnen Spalten bestimmt.
pxFeste Längenangabe. Auch andere Feste Werte sind möglich
repeat(<anzahl>, <breite>)Es werden <anzahl> Spalten/Reihen mit der angegebenen Breite/Höhe erstellt. Wenn für die Anzahl auto-fill angegeben wird, werden so viele Spalten wie möglich erzeugt.
minmax(<min>,<max>)gibt die minimale bzw. maximale Breite einer Spalte an.

Werte für align und justify

WertBeschreibung
start
end
center
stretch
space-evenly
space-around
space-between

Statische Layouts

#container{
	display: grid;
	grid-template-areas:
	"box1 box1"
	"box2 box3"
	;
}
 
#element1{
	grid-area: box1;
}
 
#element2{
	grid-area: box2;
}
 
#element3{
	grid-area: box3;
}

Grid Template Columns

#grid-container {
  display: grid;
  width: 100px;
  grid-template-columns: 20px 20% 60%;
}

fr Relative Unit

.grid {
  display: grid;
  width: 100px;
  grid-template-columns: 1fr 60px 1fr;
}

Grid Gap

/*The distance between rows is 20px*/
/*The distance between columns is 10px*/
#grid-container {
  display: grid;
  grid-gap: 20px 10px;
}

CSS Block Level Grid

#grid-container {
  display: block;
}

CSS grid-row

CSS syntax:

  • grid-row: grid-row-start / grid-row-end;

Example

.item {
  grid-row: 1 / span 2;
}

CSS Inline Level Grid

#grid-container {
  display: inline-grid;
}

minmax() Function

.grid {
  display: grid;
  grid-template-columns: 100px minmax(100px, 500px) 100px;
}

grid-row-start & grid-row-end

CSS syntax:

  • grid-row-start: auto|row-line;
  • grid-row-end: auto|row-line|span n;

Example

grid-row-start: 2;
grid-row-end: span 2;

CSS grid-row-gap

grid-row-gap: length;

Any legal length value, like px or %. 0 is the default value

CSS grid-area

.item1 {
  grid-area: 2 / 1 / span 2 / span 3;
}

Justify Items

#container {
  display: grid;
  justify-items: center;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
}

CSS grid-template-areas

.item {
  grid-area: nav;
}
.grid-container {
  display: grid;
  grid-template-areas:
    'nav nav . .'
    'nav nav . .';
}

Justify Self

#grid-container {
  display: grid;
  justify-items: start;
}
 
.grid-items {
  justify-self: end;
}

The grid items are positioned to the right (end) of the row.

Align Items

#container {
  display: grid;
  align-items: start;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
}

subgrid

.grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(4, minmax(100px, auto));
}
 
.item {
  display: grid;
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  grid-template-columns: subgrid;
  grid-template-rows: repeat(3, 80px);
}
 
.subitem {
  grid-column: 3 / 6;
  grid-row: 1 / 3;
}

Graph View