GRID TEMPLATE COLUMNS DAN ROWS

CSS Grid Layout adalah teknik dalam CSS yang memungkinkan kamu untuk membuat layout web yang kompleks dan responsif dengan mudah. Dua bagian penting dari layout ini adalah grid-template-columns dan grid-template-rows.

Grid Template Columns

Grid-template-columns adalah properti dalam CSS grid yang digunakan untuk mendefinisikan jumlah dan ukuran kolom dalam suatu grid. Nilainya bisa berupa panjang tetap (seperti px, em, rem, dll), persentase, atau fraksi (fr) dari ruang yang tersedia.

Berikut contoh penggunaan grid-template-columns:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

Penjelasan: kode di atas mendefinisikan grid dengan tiga kolom. Kolom pertama dan ketiga akan mengambil 1 bagian dari ruang yang tersedia, sementara kolom kedua akan mengambil 2 bagian. Dengan cara ini, kamu dapat membuat layout yang fleksibel dan adaptif terhadap perubahan ukuran viewport.

Grid Template Rows

Sedangkan grid-template-rows adalag properti dalam CSS grid yang digunakan untuk mendefinisikan jumlah dan ukuran baris dalam suatu grid. Sama seperti grid-template-columns, nilainya bisa berupa panjang tetap (seperti px, em, rem, dll), persentase, atau fraksi (fr) dari ruang yang tersedia.

Berikut contoh penggunaan grid-template-rows:

.container {
  display: grid;
  grid-template-rows: 150px auto 150px;
}

Penjelasan: kode di atas mendefinisikan grid dengan tiga baris. Baris pertama dan ketiga memiliki tinggi tetap 150px, sementara tinggi baris kedua akan otomatis menyesuaikan diri berdasarkan kontennya.

Gabungan Grid Template Columns dan Grid Template Rows

Kamu juga bisa menggunakan grid-template-columns dan grid-template-rows secara bersamaan untuk membuat layout yang lebih kompleks.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 150px auto 150px;
}

Penjelasan: kode di atas mendefinisikan grid dengan tiga kolom dan tiga baris. Kolom dan baris akan beradaptasi berdasarkan spesifikasi yang telah ditentukan.

Dengan memahami grid-template-columns dan grid-template-rows, kamu akan mampu membuat layout web yang dinamis dan adaptif dengan CSS Grid Layout. Selamat mencoba!