Belyninhoud langs die vertikale as in CSS-raster
Om inhoud langs die vertikale as van die raster te belyn, gebruik ons
die eienskap align-content, wat
in die ouerelement gestel word.
Aan die begin van die as
Kom ons stel die belyning vir ons elemente in die raster aan die begin van die vertikale as:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
align-content: start;
grid-template-columns: 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;
}
:
In die middel van die as
Kom ons stel nou die belyning van die elemente in die middel van die vertikale as:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
align-content: center;
grid-template-columns: 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;
}
:
Aan die einde van die as
Kom ons stel die belyning van die elemente aan die einde van die vertikale as:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
align-content: end;
grid-template-columns: 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;
}
:
Praktiese take
Skep 'n raster wat uit ses elemente bestaan, geplaas in twee rye. Voer die belyning van die elemente aan die begin van die vertikale as van die raster uit.
Plaas nou die rasterelemente in twee rye en stel die belyning van die elemente in die middel van die vertikale as van die raster.
Verander die vorige taak, sodat die belyning van die elemente aan die einde van die vertikale as plaasvind.
