CSS Grid Level 2: Here Comes Subgrid

Kami sekarang lebih dari satu tahun sejak CSS Grid Layout mendarat di sebagian besar browser kami, dan Kelompok Kerja CSS sudah mengerjakan Level 2 dari spesifikasi. Pada artikel ini, saya akan menjelaskan apa yang saat ini menjadi bagian dari Working and Editor's Draft dari spesifikasi tersebut. Perhatikan bahwa semua yang ada di sini dapat berubah, dan saat ini tidak ada yang berfungsi di browser. Ambil ini sebagai mengintip ke dalam proses, saya yakin saya akan menulis bagian yang lebih praktis saat kita mulai melihat implementasi terbentuk.

Level Spesifikasi CSS

Fitur Grid CSS yang saat ini dapat kita gunakan di browser adalah yang berasal dari Level 1 spesifikasi Grid CSS. Berbagai bagian CSS dipecah menjadi modul; modularisasi ini terjadi ketika CSS berpindah dari CSS 2.1, itulah sebabnya Anda terkadang mendengar orang berbicara tentang CSS3. Pada kenyataannya, tidak ada CSS3. Sebaliknya, ada satu set modul yang mencakup semua hal yang sudah menjadi bagian dari spesifikasi CSS2.1. Setiap CSS yang ada di CSS2.1 menjadi bagian dari modul Level 3, oleh karena itu, kami memiliki CSS Selectors Level 3, karena penyeleksi ada di CSS2.1.

Fitur CSS baru yang bukan merupakan bagian dari CSS2.1, seperti CSS Grid Layout, dimulai pada Level 1. Spesifikasi CSS Grid Level 1 pada dasarnya adalah versi pertama dari Grid. Setelah Level spesifikasi mencapai status Rekomendasi Kandidat, fitur baru utama tidak ditambahkan. Ini berarti bahwa browser dan agen pengguna lainnya dapat mengimplementasikan spesifikasi dan dapat menjadi Rekomendasi W3C. Jika fitur baru akan dirancang, fitur tersebut akan terjadi di Level spesifikasi yang baru. Kami berada di titik ini dengan CSS Grid Layout. Spesifikasi Level 1 ada di CR, dan spesifikasi Level 2 telah dibuat agar fitur baru dapat dikerjakan. Saya menyarankan untuk melihat Draf Editor jika Anda ingin mengikuti diskusi spesifikasi, karena ini akan berisi semua suntingan terbaru.

Apa Isi dari Grid CSS Level 2?

Pada akhirnya, spesifikasi level 2 akan berisi semua yang sudah ada di Level 1 ditambah beberapa fitur baru. Jika Anda melihat spesifikasi pada saat penulisan, ada catatan yang menjelaskan bahwa semua Level 1 harus disalin setelah Level 2 mencapai CR.

Kami kemudian dapat berharap untuk menemukan beberapa fitur baru, dan Level 2 dari Spesifikasi Grid adalah tentang mengerjakan fitur subgrid dari CSS Grid. Fitur ini diturunkan dari spesifikasi Level 1 untuk memberikan waktu untuk memahami kasus penggunaan subgrid dengan benar, dan memberikan lebih banyak waktu untuk mengerjakannya tanpa menahan sisa Level 1. Di sisa artikel ini, saya akan melihat fitur subgrid seperti yang saat ini dirinci dalam Draf Editor. Kami berada pada tahap yang sangat awal dengan fitur tersebut, namun, ini adalah waktu yang tepat untuk mengikuti, dan untuk benar-benar membantu membentuk bagaimana spesifikasi dikembangkan. Tujuan saya menulis artikel ini adalah untuk menjelaskan beberapa hal yang sedang dibahas, agar Anda dapat memahami dan membawa masukan Anda ke dalam diskusi.

Apa Itu Subgrid?

Saat menggunakan Tata Letak Kotak CSS, Anda sudah dapat membuat kisi-kisi. Dalam contoh di bawah ini, saya memiliki kotak induk dengan enam trek kolom dan trek tiga baris. Saya telah memposisikan item di kisi ini dari baris kolom 2 ke baris 6 dan dari baris baris 1 ke 3. Saya kemudian membuat item itu wadah kotak dan trek kolom yang ditentukan.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: 2fr 1fr 2fr 1fr; }

Trek dari grid bersarang kami tidak memiliki hubungan dengan trek pada induknya. Ini berarti bahwa jika kita ingin dapat menyejajarkan trek dari grid bersarang kita dengan garis di grid luar, kita harus melakukan pekerjaan dan menggunakan metode penghitungan ukuran trek yang memastikan semua trek tetap sama. Pada contoh di atas, trek akan terlihat berjajar, hingga item dengan ukuran lebih besar ditambahkan ke satu sel kisi (sehingga menggunakan lebih banyak ruang).

Untuk kolom, seringkali dimungkinkan untuk menyiasati skenario di atas, pada dasarnya dengan membatasi fleksibilitas grid. Anda dapat membuat kolom unit fr Anda minmax(0,1fr) agar mereka mengabaikan ukuran item saat melakukan distribusi ruang, atau Anda dapat kembali menggunakan persentase. Namun, ini menghilangkan beberapa manfaat dari penggunaan kisi dan, ketika harus menyusun baris dalam kisi bersarang, metode ini tidak akan berfungsi.

Katakanlah kita menginginkan tata letak kartu di mana masing-masing kartu memiliki header, body, dan footer. Kami juga ingin header dan footer sejajar di seluruh kartu.

 .cards { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; } .card { display: grid; grid-template-rows: auto 1fr auto; }

Ini berfungsi selama konten memiliki ketinggian yang sama di setiap header dan footer. Jika kita memiliki konten tambahan maka ilusi rusak dan header dan footer tidak lagi berbaris di sepanjang baris.

Membuat Subgrid

Sekarang kita dapat melihat bagaimana fitur subgrid saat ini ditentukan, dan bagaimana hal itu dapat memecahkan masalah yang saya tunjukkan di atas.

Catatan : Pada saat penulisan, tidak ada kode di bawah ini yang berfungsi di browser. Tujuannya di sini adalah untuk menjelaskan sintaks dan konsep. Spesifikasi akhir juga kemungkinan akan berubah dari detail ini. Untuk referensi, saya telah menulis artikel ini berdasarkan Draf Editor yang tersedia pada 23 Juni 2018.

Untuk membuat subgrid, kita akan memiliki nilai baru untuk grid-template-rows dan grid-template-columns . Properti ini biasanya digunakan dengan daftar trek, yang menentukan jumlah dan ukuran trek baris dan kolom. Namun, saat membuat subkisi, Anda tidak ingin menentukan trek ini. Sebagai gantinya, Anda menggunakan nilai subgrid untuk memberi tahu kisi bahwa kisi bersarang ini harus menggunakan jumlah trek dan ukuran trek yang mencakup area kisi yang terbentang.

Dalam kode di bawah ini, saya memiliki kotak induk dengan trek 6 kolom dan trek 3 baris. Grid bersarang adalah item grid pada grid induk itu dan membentang dari baris kolom 2 ke baris kolom 6 dan dari baris baris 1 ke baris baris 4. Ini sama seperti contoh awal kita, namun, sekarang kita dapat melihatnya menggunakan jaringan bawah tanah. Grid bersarang memiliki nilai subgrid untuk kedua grid-template-columns dan grid-template-rows . Ini berarti bahwa grid bersarang sekarang memiliki trek 4 kolom dan trek 2 baris, menggunakan ukuran yang sama dengan trek yang ditentukan pada induknya.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }

Ini berarti bahwa setiap perubahan ukuran trek pada induknya akan diikuti oleh kisi bersarang. Sebuah kata yang lebih panjang membuat salah satu trek di grid induk lebih lebar akan mengakibatkan trek di grid bersarang juga menjadi lebih lebar, sehingga hal-hal akan terus berbaris. Ini juga akan bekerja dengan cara lain: trek dari grid induk bisa menjadi lebih luas berdasarkan konten di subgrid.

Subgrid Satu Dimensi

Anda dapat memiliki subkisi di satu dimensi dan menentukan ukuran trek di dimensi lain. Dalam contoh berikut ini, subgrid hanya ditentukan pada grid-template-columns . Properti grid-template-rows memiliki daftar lagu yang ditentukan. Trek kolom karena itu akan tetap seperti empat trek yang kita lihat di atas, tetapi trek baris dapat didefinisikan secara terpisah ke trek induknya.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: 10em 5em 200px 200px; }

Ini berarti bahwa baris subkisi akan bersarang di dalam kisi induk, sama seperti saat membuat kisi bersarang hari ini. Karena kisi bersarang kita mencakup dua baris induk, satu atau kedua baris ini perlu diperluas untuk menampung konten subkisi agar tidak menyebabkan luapan.

Anda juga dapat memiliki subkisi dalam satu dimensi dan dimensi lainnya menggunakan trek implisit. Dalam contoh di bawah ini, saya belum menentukan trek baris apa pun, dan memberi nilai untuk grid-auto-rows . Baris akan dibuat dalam kisi implisit pada ukuran yang saya tentukan dan, seperti contoh sebelumnya, induk perlu memiliki ruang untuk baris ini atau memperluas untuk menampungnya.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-auto-rows: minmax(200px, auto); }

Penomoran Baris Dan Subgrid

Jika kita melihat contoh pertama kita lagi, ukuran trek subgrid kita ditentukan oleh induk di kedua dimensi. Nomor baris, bagaimanapun, bertindak seperti biasa di subgrid. Garis kolom pertama pada arah inline adalah garis 1, dan garis di ujung terjauh dari arah inline adalah garis -1. Anda tidak merujuk ke baris subgrid dengan nomor baris induknya.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; } .subitem { grid-column: 2 / 4; grid-row: 2; }

Kesenjangan dan Subgrid

Subgrid akan mewarisi setiap celah kolom atau baris yang ditetapkan pada grid induk, namun, ini dapat diabaikan oleh celah kolom dan baris yang ditentukan pada subgrid. Jika, misalnya kisi induk memiliki column-gap disetel ke 20px, tetapi subgrid kemudian memiliki column-gap disetel ke 0, sel grid dari subgrid akan mendapatkan 10px di setiap sisi untuk mengurangi celah menjadi 0, dengan garis grid pada dasarnya berjalan di tengah celah.

Sekarang kita dapat melihat bagaimana subgrid akan membantu kita memecahkan kasus penggunaan kedua dari awal artikel ini, yaitu memiliki kartu dengan header dan footer yang berbaris di seluruh kartu.

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: auto 1fr auto; grid-gap: 20px; } .card { grid-row: auto / span 3; /* use three rows of the parent grid */ display: grid; grid-template-rows: subgrid; grid-gap: 0; /* set the gap to 0 on the subgrid so our cards don't have gaps */ }

Nama Baris Dan Subgrid

Nama baris apa pun di kisi induk Anda akan diteruskan ke subgrid. Oleh karena itu, jika kita menamai garis pada kisi induk kita, kita dapat memposisikan item sesuai dengan nama garis tersebut.

 .grid { display: grid; grid-template-columns: [a] 1fr [b] 2fr [c] 1fr [d] 2fr [e] 1fr [f] 2fr [g]; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: 10em 5em 200px 200px; } .subitem { grid-column: c / e; }

Anda juga dapat menambahkan nama baris ke subgrid Anda, garis grid dapat memiliki beberapa nama baris sehingga nama ini akan ditambahkan ke baris. Untuk menentukan nama baris, tambahkan daftar nama ini setelah nilai subgrid dari grid-template-columns dan grid-template-rows . Jika kita mengambil contoh di atas dan juga menambahkan nama ke baris subgrid, kita akan mendapatkan dua nama baris untuk setiap baris di subgrid.

 .grid { display: grid; grid-template-columns: [a] 1fr [b] 2fr [c] 1fr [d] 2fr [e] 1fr [f] 2fr [g]; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid [sub-a] [sub-b] [sub-c] [sub-d] [sub-e]; grid-template-rows: 10em 5em 200px 200px; } .subitem { grid-column: c / e; }

Trek dan Subgrid Tersirat

Setelah Anda memutuskan bahwa dimensi kisi Anda adalah subkisi, ini menghilangkan kemampuan untuk memiliki trek implisit tambahan di dimensi itu. Jika Anda menambahkan lebih banyak item yang dapat ditampung, item tambahan akan ditempatkan di jalur subgrid terakhir yang tersedia dengan cara yang sama seperti item ditangani di grid yang terlalu besar. Area Kisi yang dibuat di subkisi yang membentang lebih banyak trek daripada yang tersedia, akan memiliki baris terakhir yang disetel ke baris terakhir subkisi.

Namun, seperti yang dijelaskan di atas, Anda dapat membuat satu dimensi subkisi Anda berperilaku dengan cara yang persis sama seperti grid bersarang normal, termasuk trek implisit.

Terlibat Dengan Proses

Pekerjaan Kelompok Kerja CSS terjadi di depan umum, di GitHub sama seperti proyek sumber terbuka lainnya. Hal ini membuat agak lebih mudah untuk mengikuti pekerjaan yang semuanya terjadi di milis. Anda dapat melihat masalah yang diangkat terhadap Level 2 spesifikasi Grid CSS dengan mencari masalah yang ditandai sebagai css-grid-2 di repositori GitHub Kelompok Kerja CSS. Jika Anda dapat menyumbangkan pemikiran atau kasus penggunaan untuk salah satu dari masalah itu, itu akan disambut.

Ada fitur lain yang diminta orang untuk Tata Letak Kotak CSS, dan fakta bahwa fitur tersebut belum disertakan di Level 2 tidak berarti fitur tersebut tidak dipertimbangkan. Anda dapat melihat level sebagai rilis fitur yang mungkin ada dalam suatu produk, hanya karena beberapa fitur bukan bagian dari sprint saat ini, bukan berarti itu tidak akan pernah terjadi. Bekerja pada fitur platform web baru cenderung memakan waktu sedikit lebih lama daripada rilis produk rata-rata, tetapi ini adalah proses yang serupa.

Berapa Lama Semua Ini Dibutuhkan?

Pengembangan spesifikasi dan implementasi browser adalah proses yang agak melingkar dan berulang. Ini bukanlah kasus bahwa spesifikasi perlu "selesai" sebelum kita akan melihat beberapa implementasi browser. Implementasi awal kemungkinan berada di belakang flag fitur — sama seperti spesifikasi grid aslinya. Awasi kemunculannya, karena begitu ada kode untuk dimainkan, memikirkan fitur-fitur ini jauh lebih mudah!

Saya harap tur yang akan segera datang ini menarik. Saya senang bahwa fitur subgrid sedang berlangsung, karena saya selalu percaya ini penting untuk sistem tata letak grid penuh untuk web, lihat ruang ini untuk berita lebih lanjut tentang bagaimana fitur berkembang dan implementasi browser yang muncul.