Belyning in beide asse binne CSS-rooster selle
Jy kan gelyktydig belyning van elemente binne rooster selle
sowel op die horisontale as die vertikale asse spesifiseer.
Vir hierdie doel kan ons die twee
eienskappe justify-items
en align-items kombineer, wat
in die ouer-element gespesifiseer word.
In die middel van die asse
Kom ons belyn ons elemente in die middel van die horisontale en vertikale asse:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
justify-items: center;
align-items: center;
grid-template-columns: 100px 100px;
grid-template-rows: 100px 100px;
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;
}
:
Laat ons nou na ons rooster kyk in die debugger:
By die begin van horisontaal en einde van vertikaal
Kom ons plaas ons elemente in die selle by die begin van die horisontale as en die einde van die vertikale as:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
justify-items: start;
align-items: end;
grid-template-columns: 100px 100px;
grid-template-rows: 100px 100px;
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;
}
:
Laat ons nou na ons rooster kyk in die debugger:
By die einde van horisontaal en begin van vertikaal
Kom ons plaas ons elemente in die selle by die einde van die horisontale as en die begin van die vertikale as:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
justify-items: end;
align-items: start;
grid-template-columns: 100px 100px;
grid-template-rows: 100px 100px;
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;
}
:
Laat ons nou na ons rooster kyk in die debugger:
Praktiese take
Skep 'n rooster wat uit vyf elemente bestaan, geplaas in drie rye. Voer belyning van elemente in die selle uit by die begin van die horisontale as en die middel van die vertikale as.
Plaas nou die rooster elemente in twee rye en spesifiseer belyning van elemente binne die selle by die middel van die horisontale as en die begin van die vertikale as.
Verander die vorige taak, sodat belyning van elemente plaasvind by die einde van die horisontale as en die middel van die vertikale as.
