Grid–Container und Grid-Elemente ausrichten

Grid Container und Grid Elemente

Sieben CSS-Eigenschaften stehen dafür zur Verfügung: justify-content, align-self, justify-self, align-content, justify-items, align-items und dann auch noch place-content.

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;
   gap: 3px;
   background: #efefef;
   justify-content:center;
   align-content:end;
   place-content:center;
}

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.

place-content kombiniert align-content und justify-content.

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.

flex-start

Elemente werden nach oben verschoben

flex-end

Elemente werden nach unten verschoben

1

Mikado

2

Vehicula
Novum

3

Consequat
Zurpis Elementum
Ut auctor risus

@media (min-width: 580px) {
    .items {
        display: grid;
        align-content:space-between;
    }
}

Das vertikale Ausrichten der Grid-Items wartet auf grid-template-rows: subgrid, um Zeilen in nebeneinander liegenden Spalten je nach Inhalt auf dieselbe Höhe zu bringen.

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.

• 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

Grid ist ein Gewinn für das moderne Webdesign, aber das Ausrichten von Zeilen innerhalb von Spalten hat CSS nur ansatzweise im Griff. Das ändert sich mit grid-template-rows: subgrid (Zurzeit nur mit Safari Technology Preview).

align-items

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

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

Die elegante Lösung, innerhalb von Grid-Spalten auch Zeilen gleicher Höhe einzurichten, kommt mit grid-template-rows: subgrid.