DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Pelajari lebih lanjut tentang Grid Column dan Grid Row dalam CSS dan cara menggunakan mereka untuk membuat layout yang lebih terstruktur dan responsif.
Dalam pembuatan website, seringkali kamu perlu mengatur tata letak elemen dengan cara yang spesifik. CSS menyediakan berbagai metode untuk melakukan hal ini, dan salah satu metode yang paling kuat adalah dengan menggunakan Grid Layout. Dalam Grid Layout, dua konsep penting yang perlu dipahami adalah Grid Column dan Grid Row.
Grid Column adalah garis vertikal yang membagi area grid menjadi kolom. Kamu dapat menentukan jumlah dan ukuran kolom dengan property grid-template-columns
.
Berikut adalah contoh penggunaan grid-template-columns
:
.container {
display: grid;
grid-template-columns: 200px 100px auto;
}
Dalam contoh di atas, .container
akan memiliki tiga kolom. Kolom pertama memiliki lebar 200px, kolom kedua 100px, dan kolom ketiga mengisi sisa ruang yang tersedia.
Untuk menentukan jarak antara kolom, kamu dapat menggunakan property grid-column-gap
.
.container {
display: grid;
grid-template-columns: auto auto auto;
grid-column-gap: 10px;
}
Dalam contoh di atas, jarak antara setiap kolom adalah 10px.
Sama seperti Grid Column, Grid Row adalah garis horizontal yang membagi area grid menjadi baris. Kamu bisa menentukan jumlah dan ukuran baris dengan properti grid-template-rows
.
Berikut adalah contoh penggunaan grid-template-rows
:
.container {
display: grid;
grid-template-rows: 200px 100px auto;
}
Dalam contoh di atas, .container
akan memiliki tiga baris. Baris pertama memiliki tinggi 200px, baris kedua 100px, dan baris ketiga mengisi sisa ruang yang tersedia.
Untuk menentukan jarak antara baris, kamu bisa menggunakan properti grid-row-gap
.
.container {
display: grid;
grid-template-rows: auto auto auto;
grid-row-gap: 10px;
}
Dalam contoh di atas, jarak antara setiap baris adalah 10px.
Dengan memahami Grid Column dan Grid Row, kamu bisa menciptakan tata letak yang lebih fleksibel dan responsif. Practise make perfect, jadi coba praktekkan penggunaan kedua properti ini dalam projek kamu.