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.

18-12-15 SITEMAP

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

align-content verteilt überschüssigen Raum.

space-evenly
Freien Raum innerhalb der Gesamthöhe gleichmäßig verteilen.
space-around
Freien Raum zwischen den Elementen gleichmäßig verteilen.
space-between
Freien Raum zwischen die Elementen legen, nicht aber an den Anfang und das Ende der Elemente.
center
Der freie Raum wird den Elementen zugeschlagen.
start
end
Freier Raum wird an das Ende der Elemente gelegt.
1
Mikado
2
Vehicula
Novum
3
Consequat
Zurpis Elementum
Ut auctor risus
@media (min-width: 580px) {
    .items {
        display: grid;
        align-content:space-between;
    }
}

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;
}