Perataan pada Kedua Sumbu di Dalam Sel CSS Grid
Kita dapat secara bersamaan mengatur
perataan elemen di dalam sel grid
baik pada sumbu horizontal maupun vertikal.
Untuk tujuan ini, kita dapat menggabungkan dua
properti justify-items
dan align-items, yang
diatur dalam elemen induk.
Di Tengah Sumbu
Mari kita ratakan elemen kita di tengah sumbu horizontal dan vertikal:
<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 kita di debugger:
Di Awal Horizontal dan Akhir Vertikal
Mari kita posisikan elemen kita di dalam sel pada awal sumbu horizontal dan akhir sumbu vertikal:
<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 kita di debugger:
Di Akhir Horizontal dan Awal Vertikal
Mari kita posisikan elemen kita di dalam sel pada akhir sumbu horizontal dan awal sumbu vertikal:
<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 kita di debugger:
Tugas Praktis
Buatlah grid yang terdiri dari lima elemen, ditempatkan dalam tiga baris. Lakukan perataan elemen di dalam sel pada awal sumbu horizontal dan tengah sumbu vertikal.
Sekarang tempatkan elemen grid pada dua baris dan atur perataan elemen di dalam sel pada tengah sumbu horizontal dan awal sumbu vertikal.
Ubah tugas sebelumnya, sehingga perataan elemen terjadi pada akhir sumbu horizontal dan tengah sumbu vertikal.
