GRID AUTO ROWS, COLUMNS DAN FLOW

CSS Grid adalah teknologi yang revolusioner dalam pengembangan web yang memudahkan pembuatan layout halaman web. Salah satu fitur yang membuatnya begitu kuat adalah properti grid-auto-rows, grid-auto-columns dan grid-auto-flow. Dalam tutorial ini, kamu akan dipandu untuk mengerti dan memahami cara penggunaan properti-properti tersebut.

Grid Auto Rows dan Grid Auto Columns

Properti grid-auto-rows dan grid-auto-columns digunakan untuk mengatur ukuran sel-sel grid yang dibuat secara otomatis.

Grid Auto Rows

Properti grid-auto-rows digunakan untuk mengatur tinggi sel-sel grid yang dibuat secara otomatis.

sebagai contoh:

.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-auto-rows: 50px;
}

Pada contoh di atas, semua baris grid yang dibuat secara otomatis akan memiliki tinggi 50px.

Grid Auto Columns

Sedangkan grid-auto-columns digunakan untuk mengatur lebar sel-sel grid yang dibuat secara otomatis.

sebagai contoh:

.container {
  display: grid;
  grid-template-rows: 100px 200px;
  grid-auto-columns: 50px;
}

Pada contoh di atas, semua kolom grid yang dibuat secara otomatis akan memiliki lebar 50px.

Grid Auto Flow

Properti grid-auto-flow digunakan untuk mengontrol cara item grid ditempatkan di dalam grid ketika tidak ada posisi yang ditentukan untuknya. Nilai default dari properti ini adalah ‘row’, yang berarti item akan diisi secara otomatis dari atas ke bawah, kemudian kiri ke kanan.

sebagai contoh:

.container {
  display: grid;
  grid-auto-flow: column;
}

Pada contoh di atas, item yang tidak memiliki posisi yang ditentukan akan diisi secara otomatis dari kiri ke kanan, kemudian atas ke bawah.

Yuk, eksplor lebih lanjut dan eksperimen dengan properti ini untuk membuat desain grid yang kreatif dan menarik!