Wyrównanie pojedynczego elementu wzdłuż obu osi siatki CSS
Można wyrównać pojedynczy element
jednocześnie zarówno wzdłuż osi poziomej,
jak i pionowej
poprzez połączenie właściwości justify-self
i align-self.
Do początku osi poziomej i środka pionowej
Ustawmy wyrównanie dla naszego pierwszego elementu do początku osi poziomej i środka osi pionowej:
<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 {
justify-self: start;
align-self: center;
}
:
Do środka osi poziomej i początku pionowej
Teraz ustawmy wyrównanie pierwszego elementu do środka osi poziomej i początku osi pionowej:
<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 {
justify-self: center;
align-self: start;
}
:
Do końca osi poziomej i środka pionowej
Ustawmy wyrównanie pierwszego elementu do końca osi poziomej i środka osi pionowej:
<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 {
justify-self: end;
align-self: center;
}
:
Zadania praktyczne
Utwórz siatkę składającą się z sześciu elementów i rozmieść je w dwóch wierszach. Wykonaj wyrównanie drugiego elementu do początku osi poziomej i środka osi pionowej.
Teraz rozmieść elementy siatki w trzech wierszach i ustaw wyrównanie trzeciego elementu do środka osi poziomej i końca osi pionowej.
Zmień poprzednie zadanie tak, aby wyrównanie czwartego elementu następowało do końca osi poziomej i środka osi pionowej.
Teraz spraw, aby wyrównanie piątego elementu następowało do początku osi poziomej i początku osi pionowej, a szóstego elementu - do końca osi poziomej i środka osi pionowej.
