Grid CSS bisa dikatakan sebuah cara untuk membuat tampilan sebuah website menjadi responsive selain menggunakan flexbox, jika flexbox membuat tampilan responsive dengan arah perataan satu dimensi, Grid CSS arah perataan nya (layout) bersifat dua dimensi (kolom dan baris) .

Best Practice Penggunaan Grid CSS adalah seperti dibawah ini :

See the Pen NWRMKro by Muhammad Irfan (@irfanmuhluster) on CodePen.

Kamu hanya perlu membuat sebuah kelas yang isinya setidaknya 3 properti dibawah ini. Hal yang penting dalam membuat Grid CSS adalah tiga properti ini, diantara div class kelas tersebut buat divisi sebanyak grid-template column yang kamu mau, contoh dibawah kita membuat kolom berjumlah 4 buah :

.grid {
     display: grid;
     grid-template-columns: repeat(4, 25%);
     grid-column-gap: 10px;
}

Jika dibaca secara keseluruhan kurang lebih, membuat grid 4 kolom masing-masing kolom besarnya 25% dari 100% lebar layar dengan jarak tiap kolom 10px. Menulis repeat(4, 25%) sama artinya dengan menulis grid-template-columns: 25% 25% 25% 25%; terciptalah 4 kolom pada layar.

Masalah jika menggunakan persen seperti diatas dengan gap maka lebarnya akan melebihi 100% jadi akan ada scroll kesamping. Maka hadir fraction unit sebagai solusi.

Fr Unit CSS

Fr Unit CSS atau disebut juga Fraction Unit CSS adalah salah satu satuan panjang css untuk membuat grid layout. Fr Unit secara otomatis akan membagi grid menjadi kolom atau baris dengan proporsional.

Contohnya seperti dibawah ini :

See the Pen Belajar Grid Layout by Muhammad Irfan (@irfanmuhluster) on CodePen.

Jika pakai fr unit otomatis proporsional dan otomatis ke bawah jika kita buat <div></div> didalam kelas grid lebih dari 4 kolom .

Contoh lain penggunaan grid css untuk mengatur layout, Kiri dua kolom, kanan satu kolom dengan lebar 25%.

See the Pen belajar grid by Muhammad Irfan (@irfanmuhluster) on CodePen.

Sekian