Petak CSS – Tata letak tabel kembali. Selalu siap menemani dan mendukung

TL;DR (Ringkasan)

Jika Anda akrab dengan Flexbox, Grid seharusnya terasa familier. Rachel Andrew mengelola situs bagus yang didedikasikan untuk CSS Grid untuk membantu Anda memulai. Grid kini tersedia di Google Chrome.

Flexbox? Kisi?

Selama beberapa tahun terakhir, CSS Flexbox telah banyak digunakan dan dukungan browser terlihat sangat bagus (kecuali jika Anda adalah salah satu orang miskin yang harus mendukung IE9 dan yang lebih rendah). Flexbox mempermudah banyak tugas tata letak yang kompleks, seperti jarak yang sama antar elemen, tata letak dari atas ke bawah, atau hal penting dalam keahlian CSS: pemusatan vertikal.

Tidak ada cara untuk menyelaraskan elemen di beberapa container flexbox.

Namun sayangnya, layar biasanya memiliki dimensi kedua yang perlu kita khawatirkan. Sayangnya, Anda tidak dapat memiliki ritme vertikal dan horizontal hanya dengan menggunakan flexbox saja. Di sinilah Petak CSS dapat membantu.

CSS Grid telah dalam pengembangan, di balik flag di sebagian besar browser selama lebih dari 5 tahun dan waktu tambahan telah dihabiskan untuk interoperabilitas untuk menghindari peluncuran bug seperti yang dilakukan 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 ini, implementasi Grid Microsoft Edge sudah tidak berlaku lagi (sama seperti yang sudah ada di IE11.) dan updatenya berada di "dalam pertimbangan".

Terlepas dari kesamaan dalam konsep dan sintaksis, jangan menganggap Flexbox dan Grid sebagai teknik tata letak yang bersaing. Petak disusun dalam dua dimensi, sedangkan Flexbox disusun dalam dua dimensi. Akan terjadi sinergi ketika menggunakan keduanya secara bersamaan.

Menentukan petak

Untuk memahami setiap properti Grid, saya sangat merekomendasikan Grid By Example karya Rachel Andrew atau Cheat Sheet Trik CSS. Jika Anda sudah terbiasa dengan Flexbox, banyak properti dan artinya yang sudah tidak asing.

Mari kita lihat tata letak petak 12 kolom standar. Tata letak 12 kolom klasik populer karena angka 12 dapat dibagi dengan 2, 3, 4 dan 6, dan oleh karena itu berguna untuk banyak desain. Mari kita terapkan tata letak ini:

Tidak ada cara untuk menyelaraskan elemen di beberapa container flexbox.

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 selanjutnya adalah menerapkan baris dan kolom {i>grid<i}. Kita bisa menerapkan 12 kolom di maket kita, tetapi karena kita tidak menggunakan setiap kolom, hal ini akan membuat CSS menjadi berantakan. Agar mudah, kita akan mengimplementasikan tata letak dengan cara ini:

Contoh tata letak yang disederhanakan

Lebar header dan footer bervariasi dan konten dapat bervariasi di kedua dimensi. Navigasi akan berubah-ubah di kedua dimensi, tetapi kita akan menerapkan lebar minimum 200 piksel. (Mengapa? Untuk memamerkan fitur Petak CSS, tentu saja.)

Di Petak CSS, kumpulan kolom dan baris disebut jalur. Mari kita mulai dengan menentukan rangkaian {i>track <i}pertama, baris:

body {
    display: grid;
    grid-template-rows: 150px auto 100px;
}

grid-template-rows menggunakan urutan ukuran yang menentukan masing-masing baris. Dalam hal ini, kita memberikan tinggi 150 px untuk baris pertama dan 100 px untuk baris pertama. Baris tengah ditetapkan ke auto yang berarti akan menyesuaikan dengan tinggi yang diperlukan untuk mengakomodasi item petak (turunan dari penampung petak) dalam baris tersebut. Karena isi kita direntangkan di seluruh area pandang, jalur yang berisi konten (kuning pada gambar di atas) setidaknya akan mengisi semua ruang yang tersedia, tetapi akan membesar (dan membuat dokumen dapat di-scroll) jika perlu.

Untuk kolom, kita ingin melakukan pendekatan yang lebih dinamis: kita ingin nav dan konten membesar (dan menyusut), tetapi kita ingin nav tidak pernah menyusut di bawah 200px dan kita ingin konten lebih besar dari nav. Di Flexbox kita akan menggunakan flex-grow dan flex-shrink, tetapi di Grid 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 menjadi satu.) Lebar minimum adalah, seperti yang kita bahas sebelumnya, 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 "fraction unit", tetapi dapat juga berarti unit gratis akan segera. Nilai kita di sini berarti bahwa kedua kolom akan membesar untuk mengisi layar, tetapi kolom konten akan selalu 3 kali lebih lebar dari kolom navigasi (asalkan kolom navigasi tetap lebih lebar dari 200 piksel).

Meskipun penempatan item petak kita belum benar, ukuran baris dan kolom berperilaku dengan benar dan menghasilkan perilaku yang kita inginkan:

Menempatkan item

Salah satu fitur Petak yang paling canggih adalah dapat menempatkan item tanpa memperhatikan urutan DOM. (Meskipun demikian, karena pembaca layar menavigasi DOM, kami sangat menyarankan agar Anda dapat diakses dengan benar, Anda harus memperhatikan cara mengurutkan ulang elemen.) Jika tidak ada penempatan manual yang dilakukan, elemen ditempatkan di Petak dalam urutan DOM, disusun 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 kita menempatkan elemen? Cara termudah untuk menempatkan item {i>grid<i} adalah dengan menentukan kolom dan baris mana yang dicakup. {i>Grid<i} menawarkan dua {i>syntax<i} untuk melakukannya: Pada sintaks pertama, Anda menentukan titik awal dan akhir. Dalam yang kedua, Anda menentukan titik awal dan span:

header {
    grid-column: 1 / 3;
}
nav {
    grid-row: 2 / span 2;
}
Penempatan manual

Kita ingin header dimulai di kolom pertama dan berakhir sebelum kolom ke-3. Navigasi kita akan dimulai pada baris kedua dan mencakup total 2 baris.

Secara teknis, kita telah selesai mengimplementasikan tata letak, tetapi saya ingin menunjukkan beberapa fitur kemudahan yang disediakan Grid untuk memudahkan penempatan. Fitur pertamanya adalah Anda dapat memberi nama batas jalur 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.

Yang lebih efektif lagi adalah fitur penamaan seluruh wilayah di petak Anda:

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 untuk setiap sel. Jika dua sel yang berdekatan memiliki nama yang sama, mereka akan digabungkan ke area yang sama. Dengan cara ini, Anda dapat memberikan lebih banyak semantik ke kode tata letak dan membuat kueri media menjadi lebih intuitif. Sekali lagi, kode ini akan menghasilkan tata letak yang sama seperti sebelumnya.

Apakah ada lebih banyak?

Ya, ada, terlalu banyak untuk dibahas 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 aplikasi itu. Situsnya, Grid By Example, adalah referensi berharga untuk membiasakan diri dengan Grid. Banyak orang menganggap Grid adalah langkah revolusioner untuk desain web dan sekarang diaktifkan secara default di Chrome sehingga Anda dapat mulai menggunakannya sekarang.