Singkatan untuk melaraskan elemen individu dalam grid CSS
Anda boleh melaraskan elemen individu secara serentak
pada paksi mengufuk dan menegak.
Untuk ini, sifat place-self digunakan.
Ia menerima dua nilai yang dipisahkan oleh ruang.
Nilai pertama menentukan pelarasan
pada paksi menegak, dan yang kedua - pada paksi mengufuk.
Mari kita lihat contoh.
Di tengah menegak dan permulaan mengufuk
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
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;
}
#elem1 {
place-self: center start;
}
:
Di permulaan menegak dan penghujung mengufuk
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
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;
}
#elem1 {
place-self: start end;
}
:
Di penghujung menegak dan di tengah mengufuk
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
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;
}
#elem1 {
place-self: end center;
}
:
Tugas praktikal
Buat grid yang terdiri daripada lima elemen dan letakkannya dalam tiga baris. Lakukan pelarasan elemen pertama pada permulaan paksi mengufuk dan tengah paksi menegak.
Ubah suai tugas sebelumnya supaya pelarasan elemen ketiga berlaku pada penghujung paksi mengufuk dan tengah paksi menegak.
Sekarang letakkan elemen grid dalam dua baris dan tetapkan pelarasan elemen kelima pada tengah paksi mengufuk dan penghujung paksi menegak.
Lakukan supaya elemen kedua dilaraskan pada permulaan paksi mengufuk dan penghujung paksi menegak, dan elemen keempat - pada tengah paksi mengufuk dan permulaan paksi menegak.
