Perataan Konten di Sumbu Vertikal dalam CSS Grid
Untuk meratakan konten di sepanjang sumbu vertikal
grid kita menggunakan
properti align-content, yang
ditetapkan pada elemen induk.
Di Awal Sumbu
Mari kita atur perataan untuk elemen-elemen kita di grid di awal sumbu vertikal:
<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;
}
:
Di Tengah Sumbu
Dan sekarang mari kita atur perataan elemen di tengah sumbu vertikal:
<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;
}
:
Di Akhir Sumbu
Mari kita atur perataan elemen di akhir sumbu vertikal:
<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;
}
:
Tugas Praktis
Buatlah grid yang terdiri dari enam elemen, ditempatkan dalam dua baris. Lakukan perataan elemen di awal sumbu vertikal grid.
Sekarang tempatkan elemen grid pada dua baris dan atur perataan elemen di tengah sumbu vertikal grid.
Ubah tugas sebelumnya, agar perataan elemen terjadi di akhir sumbu vertikal.
