Penjajaran pada Kedua-dua Paksi di Dalam Sel Grid CSS
Anda boleh menetapkan penjajaran elemen di dalam sel grid
serentak pada paksi mendatar dan paksi menegak.
Untuk tujuan ini, kita boleh menggabungkan dua
sifat justify-items
dan align-items, yang
ditetapkan dalam elemen induk.
Di Tengah Paksi
Mari kita menjajarkan elemen kita di tengah paksi mendatar dan menegak:
<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;
}
:
Sekarang mari kita lihat grid kami dalam pemeriksa (debugger):
Di Permulaan Mendatar dan Akhir Menegak
Mari letakkan elemen kami dalam sel pada permulaan paksi mendatar dan akhir paksi menegak:
<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;
}
:
Sekarang mari kita lihat grid kami dalam pemeriksa (debugger):
Di Akhir Mendatar dan Permulaan Menegak
Mari letakkan elemen kami dalam sel pada akhir paksi mendatar dan permulaan paksi menegak:
<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;
}
:
Sekarang mari kita lihat grid kami dalam pemeriksa (debugger):
Tugas Amali
Buat satu grid, yang terdiri daripada lima elemen, disusun dalam tiga baris. Laksanakan penjajaran elemen dalam sel pada permulaan paksi mendatar dan tengah paksi menegak.
Sekarang letakkan elemen grid mengikut dua baris dan tetapkan penjajaran elemen di dalam sel pada tengah paksi mendatar dan permulaan paksi menegak.
Ubah suai tugas sebelumnya, supaya penjajaran elemen berlaku pada akhir paksi mendatar dan tengah paksi menegak.
