Tulisan ini akan membahas mengenai satuan fr yang juga masih berhubungan dengan 2 tulisan sebelumnya. Tapi sebelum itu, ada sebuah contoh studi kasus sederhana.

Pertama, bagaimana caranya menangani sebuah grid layout dengan empat kolom di dalamnya yang masing-masing memiliki ukuran lebar proporsional dengan ukuran lebar grid-containernya?

.grid-container {
  grid-template-columns: repeat(4, calc(100%/4));
  /* 
                         repeat(jumlah_kolom, calc(lebar_grid-container/jumlah_kolom));
                         atau
                         calc(lebar_grid-container/jumlah_kolom) calc(lebar_grid-container/jumlah_kolom) calc(lebar_grid-container/jumlah_kolom) calc(lebar_grid-container/jumlah_kolom);
  */
}

Ya, caranya bisa dengan mengalkulasikan ukuran lebar grid-container yang kemudian dibagi dengan berapa banyak jumlah kolom yang dibutuhkan. Dalam kasus ini saya membaginya dengan empat kolom.

Kedua, beri grid-gap (jarak) antar kolom dengan nilai 16px!

.grid-container {
  grid-template-columns: repeat(4, calc(100%/4));
  grid-gap: 16px;
}

Overflowed! 👎

Ini dikarenakan saya baru saja mendeklarasikan grid-gap dengan nilai 16px untuk memberikan jarak antar kolom. Sedangkan ukuran lebar setiap kolom saja sudah proporsional dengan ukuran grid-container yang ada (minus grid-gap).

Dan apa yang harus dilakukan sekarang adalah mengalkulasi ulang ukuran lebar setiap kolom yang dikurangi dengan nilai grid-gap.

grid-template-columns: repeat(4, calc(100%/4 - 16px));
/*
                       repeat(jumlah_kolom, calc(lebar_grid-container/jumlah_kolom - grid-gap));
*/

Hasilnya masih belum sesuai karena sekarang terdapat ruang kosong tersisa di bagian kanan. Logika untuk menanganinya adalah ruang kosong yang tersisa di bagian kanan itu seharusnya dialokasikan saja untuk menambah ukuran lebar masing-masing dari empat kolom tersebut.

Dan itu sangatlah memungkinkan.

grid-template-columns: repeat(4, calc(100%/4 + calc(16px/4 - 16px)));
/*
                       repeat(jumlah_kolom, calc(lebar_grid-container/jumlah_kolom - calc(grid-gap/jumlah_kolom - grid-gap)));
*/

Berhasil! 👌

Dan ini tidaklah sulit, namun cukup merepotkan dan akan lebih merepotkan lagi ketika dihadapkan dengan studi kasus yang lebih kompleks. Lagipula, saat ini studi kasus di atas dapat ditangani dengan cara yang tidak sulit dan tidak merepotkan, yaitu dengan menggunakan satuan fr.

What’s the fr unit?

Satuan fr (fraction) adalah satuan yang mewakili pecahan-pecahan dari ruang kosong yang tersisa di dalam suatu grid-container.

grid-template-columns: 1fr 1fr 1fr;

Berapapun ukuran baris atau kolom yang dideklarasikan dengan satuan fr akan memiliki ukuran proporsional dan akurat mengikuti ukuran grid-containernya, yang dihasilkan dari proses rendering browser berdasarkan jumlah dan ukuran setiap baris atau kolom, ukuran grid-container, ukuran jarak antar baris atau kolom, hingga ruang kosong yang tersisa di dalam grid-container tersebut.

.grid-container {
  width: 500px;
  grid-template-columns: 3fr 2fr 1fr 1fr 1fr 1fr 1fr;
}

Why should I use the fr unit?

Sebelumnya saya mengatakan bahwa studi kasus di atas seharusnya dapat ditangani dengan cara yang tidak sulit dan tidak merepotkan dengan menggunakan satuan fr.

Let’s prove it!

Menggunakan satuan % untuk menangani grid layout dengan ukuran baris atau kolom yang proporsional di dalam studi kasus sederhana di atas saja masih cukup merepotkan, karena masih harus melakukan perhitungan matematika untuk mengalkulasi antara jumlah dan ukuran setiap baris atau kolom, ukuran grid-container, ukuran jarak antar baris atau kolom, hingga ruang kosong yang tersisa di dalam grid-container tersebut, dan lain-lain.

Beda halnya dengan menggunakan satuan fr, di mana sederhananya seperti:

Kita tentukan kebutuhan dan spesifikasi grid layout yang diinginkan, selanjutnya biarkan browser yang menangani perhitungan matematikanya.

Karena pada dasarnya satuan fr memang disediakan khusus untuk menangani grid layout agar lebih mudah dan tidak merepotkan.

Combined units

Satuan fr pun dapat dikombinasikan dengan satuan CSS lainnya seperti %, px, rem, dan sebagainya.

Contohnya sebuah grid-container berukuran lebar 500px yang di dalamnya terdapat tiga kolom. Salah satu kolomnya dideklarasikan dengan ukuran lebar 100px, sedangkan ukuran lebar dua kolom lainnya dideklarasikan dengan 1fr. Maka, dengan ruang kosong yang tersisa 400px (500px-100px), dua kolom yang dideklarasikan dengan 1fr tersebut masing-masing akan berukuran lebar sama dengan 200px (400px/2).

grid-template-columns: 100px 1fr 1fr;


grid-template-columns: 1fr 40% 40%;

Resources