FR CSS GRID

Dalam mendesain layout web dengan CSS Grid, kita seringkali menggunakan satuan fr untuk mendefinisikan ukuran dari kolom dan baris.

Satuan fr merupakan satuan fraksional yang merepresentasikan proporsi ruang yang tersedia. Berikut adalah tutorial yang akan membimbing Anda untuk memahami dan menggunakan satuan fr dalam CSS Grid:

Memahami Satuan fr

Satuan fr digunakan untuk mendefinisikan fraksi dari ruang tersedia dalam kontainer grid. Misalnya, jika Anda membagi kontainer menjadi 3 kolom dengan ukuran 1fr 2fr 1fr, kolom kedua akan dua kali lebih lebar dibandingkan kolom pertama dan ketiga.

Membuat Kontainer Grid

Buatlah kontainer grid dengan properti display: grid;. Tentukan jumlah kolom dan baris menggunakan properti grid-template-columns dan grid-template-rows.

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

Menambahkan Item Grid

Tambahkan beberapa elemen ke dalam kontainer grid Anda. Setiap elemen akan otomatis mendapatkan tempat di dalam grid.

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

Mengatur Jarak Antara Grid

Gunakan properti grid-gap untuk mengatur jarak antara grid item.

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

Uji Coba

Lakukan uji coba dengan mengubah nilai dari satuan fr untuk melihat bagaimana hal tersebut mempengaruhi tata letak dari elemen grid Anda.

.container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: 2fr 1fr;
  grid-gap: 10px;
}