Singkatan untuk penjajaran dalam sel di sepanjang kedua-dua paksi dalam Grid CSS
Dengan sifat singkatan place-items,
elemen dalam sel grid boleh diselaraskan
di sepanjang kedua-dua paksi secara serentak.
Sifat ini menerima dua nilai,
dipisahkan oleh ruang.
Nilai pertama kita tetapkan kedudukan
elemen pada paksi menegak, dan yang kedua - pada paksi mendatar.
Sifat ini ditetapkan dalam elemen induk.
Mari kita lihat cara sifat ini berfungsi melalui contoh.
Di tengah menegak dan permulaan mendatar
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
place-items: center 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;
}
:
Mari lihat grid kami dalam penyahpepijat:
Di hujung menegak dan tengah mendatar
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
place-items: end 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;
}
:
Mari lihat grid kami dalam penyahpepijat:
Di permulaan menegak dan hujung mendatar
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
place-items: start 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;
}
:
Mari lihat grid kami dalam penyahpepijat:
Tugas praktikal
Buat grid yang terdiri daripada enam elemen dan letakkannya dalam dua lajur. Lakukan penjajaran elemen pada permulaan paksi mendatar dan tengah paksi menegak grid.
Sekarang letakkan elemen grid dalam tiga lajur dan tetapkan penjajaran elemen pada tengah paksi mendatar dan tengah paksi menegak grid.
Ubah suai tugas sebelumnya supaya penjajaran elemen berlaku pada hujung paksi mendatar dan permulaan paksi menegak grid.
