Singkatan untuk Perataan Elemen Individual di CSS Grid
Anda dapat secara bersamaan meratakan elemen individual
pada sumbu horizontal dan vertikal.
Untuk ini, properti place-self digunakan.
Itu mengambil dua nilai yang dipisahkan oleh spasi.
Nilai pertama menentukan perataan
pada sumbu vertikal, dan yang kedua - pada sumbu horizontal.
Mari kita lihat contohnya.
Tengah Vertikal dan Awal Horizontal
<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;
}
:
Awal Vertikal dan Akhir Horizontal
<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;
}
:
Akhir Vertikal dan Tengah Horizontal
<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 Praktis
Buat grid yang terdiri dari lima elemen dan tempatkan dalam tiga baris. Lakukan perataan elemen pertama pada awal sumbu horizontal dan tengah sumbu vertikal.
Ubah tugas sebelumnya sehingga perataan elemen ketiga terjadi pada akhir sumbu horizontal dan tengah sumbu vertikal.
Sekarang tempatkan elemen grid dalam dua baris dan atur perataan elemen kelima pada tengah sumbu horizontal dan akhir sumbu vertikal.
Atur agar elemen kedua sejajar pada awal sumbu horizontal dan akhir sumbu vertikal, dan elemen keempat - pada tengah sumbu horizontal dan awal sumbu vertikal.
