Okrajšava za poravnavo posameznega elementa v CSS mreži
Lahko hkrati poravnamo posamezen element
tako po vodoravni kot po navpični osi.
Za to se uporablja lastnost place-self.
Ima dve vrednosti, ločeni s presledkom.
Prva vrednost določa poravnavo
po navpični osi, druga pa po vodoravni.
Poglejmo si primere.
Na sredino navpične in začetek vodoravne osi
<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 začetek navpične in konec vodoravne osi
<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 konec navpične in sredino vodoravne osi
<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;
}
:
Praktične naloge
Ustvarite mrežo, sestavljeno iz petih elementov, in jih razporedite v tri vrstice. Izvedite poravnavo prvega elementa na začetek vodoravne osi in sredino navpične osi.
Spremenite prejšnjo nalogo tako, da se poravnava tretjega elementa izvede na konec vodoravne osi in sredino navpične osi.
Zdaj razporedite elemente mreže v dve vrstici in nastavite poravnavo petega elementa na sredino vodoravne in konec navpične osi.
Naredite tako, da bo drugi element poravnan na začetek vodoravne in konec navpične osi, četrti element pa na sredino vodoravne in začetek navpične osi.
