Modul Layout “CSS Grid” menawarkan sistem tata letak berbasis matriks dengan baris dan kolom, sehingga memudahkan untuk mengkonstruksi halaman web tanpa harus menggunakan cara konvensional, yaitu kombinasi “float”, “display”, “position”.
CSS properti dari grid ini sudah didukung oleh semua browser modern, termasuk Chrome, Opera, MS Edge dan Safari.
Elemen-elemen Dari CSS Grid
Suatu layout grid terdiri dari elemen induk dengan elemen-elemen anak di dalamnya.
Contohnya code HTML + CSS berikut ini, 1 element induk dengan 12 buah elemen anak di dalamnya:
Kode CSS grid berikut kita tambahkan, agar elemen induk menjadi kontainer grid dan elemen-elemen di dalamnya menjadi anak-anak grid:
.grid-induk { display: grid; grid-column-gap: 20px; grid-row-gap: 20px; } .elemen-1 { grid-column-start: 1; grid-column-end: 10; grid-row-start: 1; grid-row-end: 5; }Hasil layout yang dihasilkan dapat dilihat pada preview HTML web page ini.
CSS Property “grid-template”
CSS Property “grid-template-column”
Properti CSS “grid-template-column” menentukan jumlah kuantitas dari kolom di dalam suatu layout CSS grid, contoh:
// Buat layout kontainer grid 4 kolom : .grid-induk { display: grid; grid-template-columns: auto auto auto auto; }CSS Property “grid-template-row”
Properti CSS “grid-template-row” menentukan jumlah kuantitas dari baris di dalam suatu layout CSS grid, contoh:
// Buat layout kontainer grid dengan spesifik menentukan tinggi baris: .grid-induk { display: grid; grid-template-rows: 50px 200px 400px 100px; }CSS Property “grid-template-areas”
Properti CSS “grid-template-areas” luasan daerah dalam layout grid. Kita dapat menamakan tiap elemen dalam grid-induk dengan property grid-area (dengan menandai dengan tanda petik) dan lalu mereferensikan nama-nama tersebut dalam property template-areas. Gunakan tanda titik-titik “.” untuk mereferensikan elemen grid tanpa nama, contoh:
// Buat elemen bernama "area-1" melangkahi 4 kolom dalam 6 kolom layout grid .elemen-1 { grid-area: area-1; } .grid-induk { display: grid; grid-template-areas: 'area-1 area-1 area-1 area-1 . .'; grid-gap: 10px; background-color: yellowgreen; padding: 10px; } .grid-induk > div { background-color: white; text-align: center; padding: 20px 0; font-size: 30px; } <div class="grid-induk"> <div class="elemen-1">area-1</div> <div class="elemen-2">2</div> <div class="elemen-3">3</div> <div class="elemen-4">4</div> <div class="elemen-5">5</div> <div class="elemen-6">6</div> <div class="elemen-7">7</div> <div class="elemen-8">8</div> <div class="elemen-9">9</div> <div class="elemen-10">10</div> <div class="elemen-11">11</div> <div class="elemen-12">12</div> </div>Hasil layout yang dihasilkan dapat dilihat pada preview HTML web page ini.
Sehingga sebagai contoh, untuk membentuk sebuah layout web page, kode CSS grid dan struktur HTML berikut dapat dipakai:
CSS Grid merupakan salah satu fitur baru di CSS 3 yang fungsi utamanya adalah mengatur layout pada website. Meskipun penggunaannya belum sepenuhnya kompatibel di semua browser, namun CSS Grid diprediksi akan menjadi salah satu fitur penting di masa depan untuk mengatur layout halaman pada HTML responsif.
CSS Grid merupakan cara baru dalam menyusun layout menggunakan CSS, sebelumnya orang banyak menggunakan float. Lihat informasi CSS Grid pada caniuse.com () untuk mengecek kompatibilitas dengan browser yang kamu gunakan. Saat ini, hampir semua browser kompatibel kecuali IE, ini mencakup 92% pengguna di seluruh dunia.
Selain CSS Grid, untuk mengatur layout website, juga bisa menggunakan Flexbox. CSS Grid bukanlah kompetitor CSS Flexbox. Keduanya saling beroperasi dan berkolaborasi untuk menyusun layout kompleks, hal ini karena sistem CSS Grid bekerja secara 2 dimensi (Rows dan Columns) sedangkan Flexbox hanya berkerja secara 1 dimensi (Rows atau Columns).
Dulu jauh sebelum ada Grid dan Flexbox, menyusun layout dalam sebuah website adalah pekerjaan yang kompleks karena kita harus repot mengatur (table layout, float, clearfix, display: table). Sekarang, dengan Grid dan Flexbox, menyusun layout pada website responsif dapat dilakukan dengan mudah.
Pada artikel ini saya akan menjelaskan dasar-dasar menggunakan CSS Grid.
Dasar
CSS Grid layout akan diaktifkan pada elemen kontainer (bisa berupa tag div atau tag lainnya) dengan menyeting properti display sebagai berikut display: grid.
Kamu bisa meletakkan properti-properti Grid sebagai properti pada kontainer dan di tiap item yang ada didalam grid. Properti yang paling dasar pada grid adalah grid-template-columns dan grid-template-rows.
grid-template-columns and grid-template-rows
Dua properti diatas menentukan jumlah kolom dan baris pada grid, keduanya juga mengatur lebar tiap kolom dan baris. Kode dibawah menjelaskan sebuah grid dengan 4 kolom dengan lebar masing-masing 200px dan 2 baris dengan tinggi basing-masing 300px.
.container {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 300px 300px;
}
Berikut adalah contoh lainnya dengan 2 kolom dan 2 baris
.container {
display: grid;
grid-template-columns: 200px 200px;
grid-template-rows: 100px 100px;
}
Satuan Ukuran Auto
Mungkin juga pada beberapa kasus kamu akan mengatur tinggi baris dengan ukuran yang tetap seperti pada header dan footer. Namun apabila kamu ingin mengatur tinggi konten sesuai dengan isi, kamu bisa menggunakan auto :
.container {
display: grid;
grid-template-rows: 100px auto 100px;
}
Ukuran kolom dan baris yang berbeda
Pada contoh-contoh sebelumnya kita membuat grid menggunakan ukuran yang sama untuk tiap baris dan kolomnya. Kamu bisa menentukan ukuran yang berbeda untuk tiap baris dan kolom, untuk membuat desain yang berbeda:
.container {
display: grid;
grid-template-columns: 100px 200px;
grid-template-rows: 100px 50px;
}
Contoh lainnya :
.container {
display: grid;
grid-template-columns: 10px 100px;
grid-template-rows: 100px 10px;
}
Mengatur jarak antara elemen
Secara otomatis, tidak ada jarak antara elemen-elemen. Kamu dapat mengatur jarak pada tiap elemen dengan properti dibawah:
grid-column-gap
grid-row-gap
Atau sintaks pendeknya grid-gap
Contohnya:
.container {
display: grid;
grid-template-columns: 100px 200px;
grid-template-rows: 100px 50px;
grid-column-gap: 25px;
grid-row-gap: 25px;
}
Atau juga bisa disingkat:
.container {
display: grid;
grid-template-columns: 100px 200px;
grid-template-rows: 100px 50px;
grid-gap: 25px;
}
Elemen yang mencakup beberapa kolom dan baris
Setiap elemen pada grid memiliki opsi untuk melebarkan atau menggabungkan beberapa kolom maupun baris (mirip atribut colspan dan rowspan pada tabel) menjadi satu dengan menggunakan kode berikut ini:
grid-column-start
grid-column-end
grid-row-start
grid-row-end
Contoh:
.container {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 300px 300px;
}
.item2 {
grid-column-start: 2;
grid-column-end: 4;
}
.item6 {
grid-column-start: 3;
grid-column-end: 5;
}
Value pada property tersebut berepresentasi dengan garis vertikal yang memisahkan tiap kolom, dimulai dari 1 hingga 5.
Hal yang sama juga bisa diterapkan untuk baris pada tiap elemen <code>grid-row-start</code> and <code>grid-row-end</code>.
Sintaks ringkas
Properti-properti grid-column-start dan grid-column-end dapat diringkas dalam satu baris kode menggunakan sintaks berikut :
grid-template-columns2
grid-template-columns3
Contoh:
.container {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 300px 300px;
}
.item2 {
grid-column: 2 / 4;
}
.item6 {
grid-column: 3 / 5;
}
Atau bisa juga dengan menggunakan span :
.container {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 300px 300px;
}
.item2 {
grid-column: 2 / span 2;
}
.item6 {
grid-column: 3 / span 2;
}
Property Grid lainnya
Fraction
Menentukan lebar-tinggi pada baris maupun kolom dengan satuan ukuran yang tetap tidaklah ideal pada pembuatan layout website, terlebih pada website yang responsif.
Selain menggunakan satuan ukuran yang tetap, kita juga bisa menggunakan satuan fr, yaitu fraction. Contoh berikut adalah menggambarkan penggunaan fraction pada grid, memisahkan 3 grid dengan ukuran lebar yang sama, yaitu 1/3 dari keseluruhan total lebar grid.
.container {
grid-template-columns: 1fr 1fr 1fr;
}
Menggunakan persentase and rem
Kamu juga bisa menggunakan persentase, fractions, pixels, rem secara bersamaan:
.container {
grid-template-columns: 3rem 15% 1fr 2fr
}
Menggunakan repeat()
repeat() adalah fungsi spesial yang digunakan untuk menyingkat penulisan untuk nilai properti yang sama. Membutuhkan nilai properti dan berapa kali properti tersebut diulang.
.container {
grid-template-columns: repeat(4, 100px);
}
Kode diatas akan membuat 4 kolom dengan ukuran lebar yang sama, yaitu 100px.
Atau bisa juga menggunakan fraction:
.container {
grid-template-columns: repeat(4, 1fr);
}
Menentukan minimal lebar baris dan
Penggunaan umum: Pada lebar sidebar yang tidak menyusut lebih dari ukuran tertentu ketika kamu mengecilkan windows.
Berikut ini adalah contoh dimana kolom selalu memiliki ukuran ¼ dari total lebar grid dan ukurannya tidak akan lebih kecil dari 200px apabila windows dikecilkan.
.container {
grid-template-columns: minmax(200px, 3fr) 9fr;
}
Kamu juga bisa mengatur lebar minimal dengan auto:
.container {
grid-template-columns: minmax(auto, 50%) 9fr;
}
Atau lebar maksimal dengan auto:
.container {
grid-template-columns: minmax(100px, auto) 9fr;
}
Menyusun posisi elements menggunakan grid-template-areas
Secara default, elemen disusun sesuai dengan urutan pada struktur HTML. Dengan menggunakan grid-template-areas kamu bisa mengatur ulang posisinya dalam grid, tanpa perlu mengubah struktur HTML. Kamu juga menggabungkan beberapa kolom maupun baris tanpa perlu menggunakan grid-template-columns2 ataupun grid-template-columns3.
Seperti contoh dibawah ini:
<div class=”container”>
<main>
…
</main>
<aside>
…
</aside>
<header>
…
</header>
<footer>
…
</footer>
</div>
.container {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 300px 300px 300px;
grid-template-areas:
“header header header header”
“sidebar main main main”
“footer footer footer footer”;
}
main {
grid-area: main;
}
aside {
grid-area: sidebar;
}
header {
grid-area: header;
}
footer {
grid-area: footer;
}
Meski pada struktur HTML urutannya berbeda, elemen akan disusun sesuai dengan properti grid-template-areas.