GRID COLUMN DAN GRID ROW

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

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.

Menentukan Jarak Antara Kolom

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.

Grid Row

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.

Menentukan Jarak Antara Baris

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.