Penjajaran Kandungan Sepanjang Paksi Menegak dalam Grid CSS
Untuk menjajarkan kandungan sepanjang paksi menegak
grid, kita menggunakan
sifat align-content, yang
ditetapkan pada elemen induk.
Pada Permulaan Paksi
Mari tetapkan penjajaran untuk elemen-elemen kita dalam grid pada permulaan paksi menegak:
<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;
}
:
Pada Tengah Paksi
Dan sekarang mari tetapkan penjajaran elemen pada tengah paksi menegak:
<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;
}
:
Pada Akhir Paksi
Mari tetapkan penjajaran elemen pada akhir paksi menegak:
<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 Praktikal
Cipta grid yang terdiri daripada enam elemen, disusun dalam dua baris. Laksanakan penjajaran elemen pada permulaan paksi menegak grid.
Sekarang susun elemen grid pada dua baris dan tetapkan penjajaran elemen pada tengah paksi menegak grid.
Ubah suai tugas sebelumnya, supaya penjajaran elemen berlaku pada akhir paksi menegak.
