TL;DR (Ringkasan)
Jika Anda terbiasa dengan Flexbox, Grid seharusnya terasa familier. Rachel Andrew mengelola situs bagus khusus untuk CSS Grid guna membantu Anda memulai. Grid kini tersedia di Google Chrome.
Flexbox? Petak?
Selama beberapa tahun terakhir, CSS Flexbox telah banyak digunakan dan dukungan browser terlihat sangat bagus (kecuali jika Anda adalah salah satu dari orang-orang malang yang harus mendukung IE9 dan yang lebih lama). Flexbox mempermudah banyak tugas tata letak yang kompleks, seperti jarak yang sama jarak antar elemen, tata letak dari atas ke bawah, atau hal terpenting dalam keahlian CSS: pemusatan vertikal.
Namun sayangnya, layar biasanya memiliki dimensi kedua yang perlu kita khawatirkan. Karena singkat menangani ukuran elemen sendiri, sayangnya, Anda tidak akan dapat memiliki kedua ritme vertikal dan horizontal hanya dengan menggunakan flexbox saja. Di sinilah CSS Grid dapat membantu.
CSS Grid telah dikembangkan, di belakang sebuah tanda di sebagian besar browser selama lebih dari 5 tahun dan waktu ekstra telah dihabiskan untuk interoperabilitas untuk menghindari peluncuran yang bermasalah seperti yang dilakukan Flexbox. Jadi, jika Anda menggunakan {i>Grid<i} untuk menerapkan tata letak Anda di Chrome, kemungkinan Anda akan mendapatkan hasil yang sama di Firefox dan Safari. Pada saat penulisan ini, implementasi Edge Grid Microsoft sudah tidak berlaku (sama seperti yang sudah ada di IE11.) dan updatenya adalah "dalam pertimbangan".
Meskipun ada kemiripan konsep dan sintaksis, jangan menganggap Flexbox dan Grid sebagai teknik tata letak yang bersaing. {i>Grid<i} disusun dalam dua dimensi, sementara Flexbox diletakkan dalam satu dimensi. Menggunakan keduanya secara bersamaan akan menimbulkan sinergi.
Mendefinisikan grid
Untuk lebih mengenal masing-masing properti Grid, saya sangat menyarankan Grid By Example atau CSS Tricks' Cheat Sheet dari Rachel Andrew. Jika Anda sudah terbiasa menggunakan Flexbox, banyak properti dan artinya harus dipahami.
Mari kita lihat tata letak {i>grid <i}standar 12 kolom. Tata letak 12 kolom klasik sangat populer karena angka 12 dapat dibagi dengan 2, 3, 4 dan 6, dan karenanya berguna untuk banyak desain. Mari kita implementasikan tata letak ini:
Mari kita mulai dengan kode markup:
<!DOCTYPE html>
<body>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</body>
Di stylesheet kita mulai dengan memperluas body sehingga mencakup seluruh
area pandang dan mengubahnya menjadi penampung petak:
html, body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
}
Sekarang kita menggunakan CSS Grid. Hore!
Langkah berikutnya adalah menerapkan baris dan kolom petak kita. Kita dapat menerapkan ke-12 kolom tersebut di mockup, tetapi karena kita tidak menggunakan setiap kolom, hal ini akan membuat CSS kita terlalu berantakan. Agar lebih mudah, kita akan mengimplementasikan tata letak dengan cara ini:
Lebar header dan footer memiliki variabel dalam lebar dan konten di kedua dimensi bervariasi. Navigasi akan menjadi variabel di kedua dimensi juga, tetapi kita akan menerapkan lebar minimum 200 px. (Mengapa? Tentu saja untuk menampilkan fitur {i>CSS Grid<i}.)
Dalam Petak CSS, kumpulan kolom dan baris disebut trek. Mari kita mulai dengan menentukan {i>dataset<i} pertama kita, baris:
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
grid-template-rows menggunakan urutan ukuran yang menentukan setiap baris.
Dalam hal ini, kami memberi baris pertama tinggi 150 px dan yang terakhir 100 px.
Baris tengah disetel ke auto yang berarti baris akan disesuaikan dengan tinggi
yang diperlukan untuk mengakomodasi item petak (turunan penampung petak) di
baris tersebut. Karena badan kita direntangkan di seluruh area pandang, trek
yang berisi konten (kuning pada gambar di atas) setidaknya akan mengisi semua
ruang yang tersedia, tetapi akan membesar (dan membuat dokumen ter-scroll) jika
diperlukan.
Untuk kolom, kita ingin menggunakan pendekatan yang lebih dinamis: kita ingin navigasi dan konten membesar (dan mengecil), tetapi kita ingin navigasi tidak pernah mengecil di bawah 200 px dan kita ingin konten lebih besar dari nav. Di Flexbox, kita menggunakan flex-grow dan flex-shrink, tetapi sedikit berbeda di Grid:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
}
Kita menentukan 2 kolom. Kolom pertama ditentukan menggunakan fungsi minmax(), yang menggunakan 2 nilai: Ukuran minimum dan maksimum jalur tersebut.
(Kira-kira ini seperti min-width dan max-width dalam satu.) Seperti yang kita bahas sebelumnya, lebar minimum adalah 200 piksel. Lebar maksimumnya adalah 3fr. fr adalah unit khusus petak
yang memungkinkan Anda mendistribusikan ruang yang tersedia ke elemen petak.
fr mungkin adalah singkatan dari "unit pecahan", tetapi juga dapat berarti unit bebas segera.
Nilai kita di sini berarti kedua kolom akan bertambah besar untuk mengisi layar, tetapi kolom konten akan selalu menjadi 3 kali lebar kolom navigasi (asalkan kolom navigasi tetap lebih lebar dari 200 px).
Meskipun penempatan item petak belum benar, ukuran baris dan kolom akan berperilaku dengan benar dan menghasilkan perilaku yang diinginkan:
Meletakkan item
Salah satu fitur paling canggih dari Grid adalah kemampuan untuk menempatkan item tanpa
mempertimbangkan urutan DOM. (Meskipun demikian, karena pembaca layar menjelajahi DOM,
kami sangat menyarankan agar dapat diakses dengan benar, Anda harus memperhatikan cara
menyusun ulang elemen.) Jika tidak ada penempatan manual yang dilakukan, elemen akan ditempatkan di Petak dalam urutan DOM, disusun dari kiri ke kanan dan dari atas ke bawah. Setiap elemen
menempati satu sel. Urutan petak diisi dapat diubah menggunakan
grid-auto-flow.
Jadi, bagaimana kita menempatkan elemen-elemen? Bisa dibilang cara termudah untuk menempatkan item {i>grid<i} adalah dengan menentukan kolom dan baris mana yang dicakup. Grid menawarkan dua sintaksis untuk melakukannya: Pada sintaksis pertama, Anda menentukan titik awal dan akhir. Dalam diagram kedua, Anda menentukan titik awal dan span:
header {
grid-column: 1 / 3;
}
nav {
grid-row: 2 / span 2;
}
Kita ingin header dimulai di kolom pertama dan berakhir sebelum kolom ke-3. Navigasi kita harus dimulai di baris kedua dan mencakup total 2 baris.
Secara teknis, kita sudah selesai menerapkan tata letak, tetapi saya ingin menunjukkan beberapa fitur praktis yang disediakan Grid bagi Anda untuk mempermudah penempatan. Fitur pertama adalah Anda dapat memberi nama batas trek dan menggunakan nama tersebut untuk penempatan:
body {
display: grid;
grid-template-rows: 150px [nav-start] auto 100px [nav-end];
grid-template-columns: [header-start] minmax(200px, 3fr) 9fr [header-end];
}
header {
grid-column: header-start / header-end;
}
nav {
grid-row: nav-start / nav-end;
}
Kode di atas akan menghasilkan tata letak yang sama dengan kode sebelumnya.
Fitur penamaan seluruh wilayah yang lebih kuat di petak Anda adalah:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
grid-template-areas: "header header"
"nav content"
"nav footer";
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
grid-template-areas menggunakan string nama yang dipisahkan spasi, sehingga developer dapat memberi nama pada setiap sel. Jika dua sel yang berdekatan memiliki nama
yang sama, sel tersebut akan digabungkan ke area yang sama. Dengan cara ini, Anda dapat memberikan lebih banyak
semantik ke kode tata letak dan membuat kueri media lebih intuitif. Sekali lagi, kode
ini akan menghasilkan tata letak yang sama seperti sebelumnya.
Apakah ada hal lain?
Ya, ya, ada terlalu banyak hal untuk diliput dalam satu postingan blog. Rachel Andrew, yang juga merupakan GDE, adalah Pakar yang Diundang di CSS Working Group dan telah bekerja sama dengan mereka sejak awal untuk memastikan Grid menyederhanakan desain web. Dia bahkan menulis buku tentang buku tersebut. Situsnya, Grid By Example, adalah referensi berharga untuk memahami Grid. Banyak orang berpikir bahwa Grid adalah langkah revolusioner untuk desain web dan kini diaktifkan secara default di Chrome sehingga Anda dapat mulai menggunakannya sekarang.