Skrót do wyrównania pojedynczego elementu w siatce CSS
Można jednocześnie wyrównać pojedynczy element
względem osi poziomej i pionowej.
W tym celu używa się właściwości place-self.
Przyjmuje ona dwie wartości oddzielone spacją.
Pierwsza wartość określa wyrównanie
w pionie, a druga - w poziomie.
Spójrzmy na przykłady.
Na środku pionowej i początku poziomej
<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;
}
:
Na początku pionowej i końcu poziomej
<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;
}
:
Na końcu pionowej i na środku poziomej
<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;
}
:
Zadania praktyczne
Utwórz siatkę składającą się z pięciu elementów i rozmieść je w trzech wierszach. Wykonaj wyrównanie pierwszego elementu do początku osi poziomej i środka osi pionowej.
Zmień poprzednie zadanie tak, aby wyrównanie trzeciego elementu odbywało się do końca osi poziomej i środka osi pionowej.
Teraz rozmieść elementy siatki w dwóch wierszach i ustaw wyrównanie piątego elementu do środka osi poziomej i końca osi pionowej.
Spraw, aby drugi element był wyrównany do początku osi poziomej i końca osi pionowej, a czwarty element - do środka osi poziomej i początku osi pionowej.
