Kurzform für die Ausrichtung eines einzelnen Elements im CSS-Grid
Man kann ein einzelnes Element gleichzeitig
sowohl entlang der horizontalen als auch der vertikalen Achse ausrichten.
Dafür wird die Eigenschaft place-self verwendet.
Sie akzeptiert zwei Werte, durch Leerzeichen getrennt.
Der erste Wert gibt die Ausrichtung
entlang der vertikalen Achse an, der zweite - entlang der horizontalen.
Sehen wir uns das an Beispielen an.
Mitte vertikal und Anfang horizontal
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
#elem1 {
place-self: center start;
}
:
Anfang vertikal und Ende horizontal
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
#elem1 {
place-self: start end;
}
:
Ende vertikal und Mitte horizontal
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
#elem1 {
place-self: end center;
}
:
Praktische Aufgaben
Erstellen Sie ein Grid, das aus fünf Elementen besteht, und ordnen Sie diese in drei Reihen an. Richten Sie das erste Element am Anfang der horizontalen und in der Mitte der vertikalen Achse aus.
Ändern Sie die vorherige Aufgabe so, dass die Ausrichtung des dritten Elements am Ende der horizontalen und in der Mitte der vertikalen Achse erfolgt.
Ordnen Sie nun die Elemente des Grids in zwei Reihen an und setzen Sie die Ausrichtung des fünften Elements auf Mitte horizontal und Ende vertikal.
Sorgen Sie dafür, dass das zweite Element am Anfang der horizontalen und am Ende der vertikalen Achse ausgerichtet ist, und das vierte Element - in der Mitte der horizontalen und am Anfang der vertikalen Achse.
