Grid–Container und Grid-Elemente ausrichten

CSS Grid ausrichten und zntrierem

Die HTML-Grid-Struktur besteht aus drei Ebenen: dem Grid-Container, den Grid-Elementen und dem Inhalt der Grid-Elemente. Jede Ebene kann für sich ausgerichtet werden: zentriert, linksbündig und / oder oben, rechts und / oder unten.

Sechs CSS-Eigenschaften stehen dafür zur Verfügung: justify-content, align-self, justify-self, align-content, justify-items, align-items.

Grid Container und Grid Elemente

Breite bzw. Höhe des Grid-Items müssen kleiner sein als der verfügbare Platz des Grid-Containers, damit der Effekt von justify-content bzw. align-content sichtbar wird.

.tic-tac-toe {
   display: grid;
   grid-template-columns: 80px 80px 80px;
   grid-template-rows: 80px 80px 80px;
   grid-gap: 3px;
   background: #efefef;


}
x
o
x
o
x
o
x
o
x

Der Grid-Container selbst wird mit justify-content:center horizontal in die Mitte gesetzt.

align-content:end setzt den Grid-Container an das untere Ende des verfügbaren Platzes.

Grid-Container horizontal ausrichten: justify-content

space-evenly
Verteilt freien Platz zwischen Grid-Columns
space-around
Legt freien Platz nach recht und links
space-between
legt freien Platz zwischen die Spalten - die Salten beginnen am linken Rand und enden am rechten Rand,
center
Zentriert den Grid-Container hoizontal
start
Setzt den Grid-Container an den linken Rand des verfügbaren Platz (Voreinstellung)
end
Setz den Grid-Container an den rechten Rand

Grid-Container vertikal ausrichten: align-content

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

Grid-Items ausrichten: align-self, justify-self und place-self

Die Grid-Elemente selbst lassen sich – wie passend – mit justify-self in der Horizontalen und mit align-self in der Senkrechten ausrichten.

place-self richtet Elemente mit zwei Angaben vertikal und horizontal aus (align-self / justify-self). Mit nur einem Wert spricht place-self beide Werte an.

Voraussetzung ist wieder, dass die Grid-Elemente kleiner sind als das Platzangebot im Grid-Ccontainer.

x
o
x
o
x
o
x
o
x
  • grüne Box align-self: center;
  • zyan Box align-self: end;
  • blaue Box justify-self: center;
  • lila Box place-self: center;
  • rote Box justify-self: end;

Für align-self und justify-self gibt es sogar eine IE11-Entsptechung:

align-self   -ms-grid-column-align
justify-self -ms-grid-row-align

align-items

Mit align-items legt der Grid-Container selbst fest, wie seine Grid-Elemente auszurichten sind, wenn sie kleiner als das Platzangebot sind.

x
o
x
o
x
o
x
o
x
.tic-tac-toe {
   display: grid;
   grid-template-columns: 100px 100px 100px;
   grid-template-rows: 100px 100px 100px;
   align-items: center;
   justify-content:center;
   gap: 5px;
}

Elemente innerhalb von Grid-Elementen ausrichten

In vielen Anwendungen wird display: flex eine einfache Lösung sein:

.grid-item  {
  display: flex; 
  justify-content: center; 
  align-items: center;
}