TL;DR
Jika Anda sudah terbiasa dengan Flexbox, Grid akan terasa familier. Rachel Andrew mengelola situs yang didedikasikan untuk CSS Grid yang bagus untuk membantu Anda memulai. Petak kini tersedia di Google Chrome.
Flexbox? Petak?
Selama beberapa tahun terakhir, CSS Flexbox telah digunakan secara luas dan dukungan browser terlihat sangat bagus (kecuali jika Anda adalah salah satu orang yang harus mendukung IE9 dan yang lebih lama). Flexbox mempermudah banyak tugas tata letak yang kompleks, seperti spasi yang sama jaraknya antara elemen, tata letak atas ke bawah, atau keajaiban CSS: pemusatan vertikal.
Namun, layar biasanya memiliki dimensi kedua yang perlu kita perhatikan. Sayangnya, Anda tidak dapat memiliki kedua ritme vertikal dan horizontal hanya dengan menggunakan flexbox saja. Di sinilah Petak CSS dapat membantu.
CSS Grid telah dikembangkan, di balik flag di sebagian besar browser selama lebih dari 5 tahun dan waktu tambahan telah dihabiskan untuk interoperabilitas guna menghindari peluncuran yang bermasalah seperti Flexbox. Jadi, jika Anda menggunakan Petak untuk menerapkan tata letak di Chrome, kemungkinan Anda akan mendapatkan hasil yang sama di Firefox dan Safari. Pada saat penulisan, implementasi Grid Edge Microsoft sudah tidak berlaku (sama seperti yang sudah ada di IE11.) dan updatenya "sedang dipertimbangkan".
Meskipun ada kemiripan konsep dan sintaksis, jangan menganggap Flexbox dan Grid sebagai teknik tata letak yang bersaing. Petak mengatur dalam dua dimensi, sedangkan Flexbox menyusun dalam satu dimensi. Ada sinergi saat menggunakan keduanya secara bersamaan.
Menentukan petak
Untuk memahami setiap properti Grid, saya sangat merekomendasikan Grid By Example dari Rachel Andrew atau Cheat Sheet dari CSS Tricks. Jika Anda sudah terbiasa dengan Flexbox, banyak properti dan maknanya akan terbiasa.
Mari kita lihat tata letak petak 12 kolom standar. Tata letak klasik 12 kolom populer karena angka 12 dapat dibagi dengan 2, 3, 4, dan 6, sehingga berguna untuk banyak desain. Mari kita terapkan 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 Petak CSS. Hore!
Langkah berikutnya adalah menerapkan baris dan kolom petak. Kita dapat menerapkan ke-12 kolom dalam mockup, tetapi karena kita tidak menggunakan setiap kolom, melakukan hal ini akan membuat CSS kita 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 juga akan bervariasi dalam kedua dimensi, tetapi kita akan menerapkan lebar minimum 200 piksel. (Mengapa? Tentu saja, untuk menampilkan fitur CSS Grid.)
Di CSS Grid, kumpulan kolom dan baris disebut jalur. Mari kita mulai dengan menentukan kumpulan jalur pertama, yaitu baris:
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
grid-template-rows menggunakan urutan ukuran yang menentukan setiap baris.
Dalam hal ini, kita memberi baris pertama tinggi 150 px dan baris 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 isi ditarik ke seluruh area pandang, jalur
yang berisi konten (kuning pada gambar di atas) setidaknya akan mengisi semua
ruang yang tersedia, tetapi akan bertambah (dan membuat dokumen di-scroll) jika
diperlukan.
Untuk kolom, kita ingin menggunakan pendekatan yang lebih dinamis: kita ingin navigasi dan konten bertambah (dan menyusut), tetapi kita ingin navigasi tidak pernah menyusut di bawah 200 piksel dan kita ingin konten lebih besar dari navigasi. Di Flexbox, kita akan menggunakan flex-grow dan flex-shrink, tetapi di Grid, hal ini sedikit berbeda:
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.
(Seperti min-width dan max-width dalam satu.) Seperti yang telah dibahas sebelumnya, lebar minimum adalah 200 piksel. Lebar maksimum 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 berperilaku dengan benar dan menghasilkan perilaku yang kita inginkan:
Meletakkan item
Salah satu fitur paling canggih dari Grid adalah dapat menempatkan item tanpa
memperhatikan urutan DOM. (Meskipun, karena pembaca layar menavigasi DOM,
kami sangat menyarankan agar dapat diakses dengan benar, Anda harus memperhatikan cara
mengurutkan ulang elemen.) Jika tidak ada penempatan manual yang dilakukan, elemen akan ditempatkan
di Petak dalam urutan DOM, yang diatur dari kiri ke kanan dan dari atas ke bawah. Setiap elemen
mengisi satu sel. Urutan pengisian petak dapat diubah menggunakan
grid-auto-flow.
Jadi, bagaimana cara menempatkan elemen? Bisa dibilang, cara termudah untuk menempatkan item petak adalah dengan menentukan kolom dan baris yang dicakupnya. Petak menawarkan dua sintaksis untuk melakukannya: Dalam sintaksis pertama, Anda menentukan titik awal dan akhir. Di bagian kedua, Anda menentukan titik awal dan rentang:
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 telah selesai menerapkan tata letak, tetapi saya ingin menunjukkan beberapa fitur praktis yang disediakan Grid untuk memudahkan Anda menempatkan elemen. 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 lagi?
Ya, ada banyak sekali hal yang perlu dibahas dalam satu postingan blog. Rachel Andrew, yang juga merupakan GDE, adalah Pakar Undangan di CSS Working Group dan telah bekerja sama dengan mereka sejak awal untuk memastikan Grid menyederhanakan desain web. Ia bahkan menulis buku tentang hal itu. Situsnya, Grid By Example, adalah referensi yang berharga untuk memahami Grid. Banyak orang menganggap Petak sebagai langkah revolusioner untuk desain web dan kini diaktifkan secara default di Chrome sehingga Anda dapat mulai menggunakannya sekarang.