Subgrid CSS | 12 Hari Web

Itu subgrid nilai untuk grid-template-rows dan grid-template-columns sekarang didukung di Firefox dan Safari 16+, dan segera hadir di Chrome. Dalam artikel ini, Anda akan mempelajari cara fitur ini membuat tata letak kisi menjadi lebih canggih.

Semua contoh dalam artikel ini dapat dilihat dengan subgrid yang berfungsi di Firefox atau Safari 16+, kecuali untuk contoh terakhir.

Menggunakan subgrid berarti bahwa alih-alih membuat daftar trek sebagai nilai untuk grid-template-columns dan grid-template-rowsAnda menggunakan kata kunci subgrid.

Tidak ada properti atau nilai baru untuk dipelajari, hanya keputusan untuk dibuat—apakah Anda ingin kisi bersarang Anda memiliki definisi baris dan/atau kolomnya sendiri, atau menggunakan definisi dari induknya?

Pada contoh pertama, saya memiliki kisi bersarang yang membuat jalurnya sendiri untuk baris dan kolom. Trek ini independen, sehingga tidak akan sejajar dengan trek di kisi induk.

Lihat CodePen.

Contoh kedua menggantikan daftar lagu untuk grid-template-columns dengan kata kunci subgrid. Trek kolom kisi bersarang sekarang sejajar dengan yang ada di induk.

Lihat CodePen.

Selama setiap induk adalah kisi itu sendiri, Anda dapat terus mewarisi subkisi menjadi turunan.

Contoh berikut memperlihatkan tiga kisi, masing-masing bersarang di dalam yang lain, dan mewarisi lintasan induknya. Item anak menunjukkan kisi mana yang merupakan induknya. Menggunakan Firefox DevTools untuk menyorot setiap kisi, menyorot kisi luar menunjukkan bagaimana kisi turunan dan item kisi semuanya sejajar dengan kisi tersebut.

Lihat CodePen.

Ketika subgrid didiskusikan dalam Kelompok Kerja CSS, ada saran bahwa itu harus dikunci ke baris dan kolom. Ini berarti tidak ada kisi implisit di kedua dimensi, dan subkisi hanya akan berguna jika Anda tahu persis berapa banyak sel kisi yang Anda butuhkan di subkisi.

Pada contoh berikutnya, saya telah membuat subkisi pada kolom untuk memastikan item di kisi bersarang dapat diselaraskan dengan item langsung di dalam kisi induk. Namun, saya menggunakan kisi implisit untuk baris, karena saya mungkin memiliki sejumlah item.

Lihat CodePen.

Contoh sebelumnya menunjukkan pola berguna lainnya yang diaktifkan oleh subgrid. Dimungkinkan untuk menargetkan garis akhir dari kisi eksplisit menggunakan baris -1. Sayangnya, ini tidak berfungsi untuk menargetkan garis akhir kisi implisit.

Dengan menyarangkan item berulang dalam sebuah wadah, semuanya menjadi satu baris pada induknya. Ini berarti Anda dapat menampilkan kolom tinggi penuh pada contoh sebelumnya tanpa perlu mengetahui berapa banyak baris item yang dibuat secara implisit.

Jika Anda memeriksa contoh sebelumnya menggunakan DevTools, Anda dapat melihat bagaimana item subkisi membuat baris implisit. Karena item di sebelah kiri berada di kisi induk, item tersebut berada di baris yang sama dengan semua item dan oleh karena itu dapat setinggi yang diperlukan untuk menyelaraskan dengan baris implisit.

Jika kisi induk Anda memiliki garis bernama, ini dapat diakses dari anak. Dalam contoh berikut, baris pada kisi induk diberi nama a melalui e. Subkisi dan turunan dari subkisi tersebut kemudian ditempatkan menggunakan garis yang diberi nama ini. Teknik ini berguna, karena menghemat melacak hal-hal nomor baris. Anda dapat menyetel nama pada induknya dan mengetahui bahwa dengan menempatkan item yang dimulai dari baris tersebut, item tersebut akan selalu selaras dengan item lain yang dimulai dari baris tersebut.

Lihat CodePen.

Tidak bisa mendapatkan cukup nama baris? Anda dapat menambahkan nama ke baris di dalam subkisi. Memang, sintaksnya agak tidak biasa, karena kami tidak memiliki daftar lagu untuk memasukkan nama baris. Sebagai gantinya, Anda menambahkan nama setelah subgrid kata kunci.

.subgrid 
display: grid;
grid-template-columns: subgrid [line1] [line2] [line3];

Nama-nama ini akan ditambahkan ke nama lain yang dimiliki baris tersebut, karena sebuah baris dapat memiliki banyak nama. Anda kemudian dapat mereferensikannya menggunakan salah satu nama yang ditetapkan.

Lihat CodePen.

Saat Anda memberi nama baris dengan akhiran -start dan -end, Anda mendapatkan area bernama dari nama utama yang digunakan. Karena garis diwariskan, demikian pula area yang dinamai ini. Dalam contoh berikut, saya telah menamai garis main-start dan main-end dan col-start dan col-end. Ini memberi saya nama kolom lebar maindan kolom sempit bernama col.

Saya menempatkan artikel ke dalam grid-column: main, lalu jadikan sebagai subkisi. Saya kemudian dapat menempatkan konten artikel ke dalam kolom sempit dengan grid-column: col.

Lihat CodePen.

Itu gap properti akan mewarisi ke dalam subgrid sehingga, secara default, elemen subgrid akan memiliki celah ukuran yang sama dengan induknya. Jika Anda tidak menginginkannya, gunakan gap properti (atau column-gap atau row-gap) untuk mengubahnya.

Dalam contoh berikut, kisi induk memiliki 20px celah untuk baris dan kolom. Di subkisi, saya ingin hanya 1 piksel dari latar belakang yang ditampilkan sebagai celah, jadi saya telah mengubah gap pada kartu subgrid ke 1px.

Lihat CodePen.

Menggunakan subkisi untuk baris berarti bahwa item bersarang di subkisi terpisah, seperti kartu pada contoh sebelumnya, berada di baris yang sama yang berarti item di dalamnya dapat sejajar satu sama lain. Jika saya menambahkan lebih banyak konten ke salah satu judul, Anda dapat melihat bagaimana semua judul di baris tersebut mendapatkan ruang tambahan di bawah dan tetap sejajar.

Lihat CodePen.

Pola umumnya adalah memiliki kisi 12 kolom di semua breakpoint, dan saat area pandang menjadi lebih kecil, item menjangkau lebih banyak kolom. Pada lebar area pandang yang sangat sempit, sebuah item mungkin menjangkau semua 12, di desktop 3.

Dengan menggunakan kueri penampung, Anda dapat menguji untuk melihat apakah penampung memiliki cukup ruang, lalu aktifkan subkisi sehingga komponen dapat menggunakan trek yang dibentangnya. Dalam contoh berikut, kartu mencakup dua jalur kolom dari kisi induk. Pada lebar sempit, kartu bukanlah subkisi, dan gambar serta konten ditampilkan satu demi satu.

Setelah ada cukup ruang, kartu menjadi subkisi dan gambar serta konten ditampilkan berdampingan.

Lihat CodePen.

Dengan subgrid segera hadir di semua mesin, ini adalah waktu yang tepat untuk mulai memainkannya dan melihat alasan lain untuk menyukai subgrid yang dapat Anda pikirkan. Lihat sumber daya berikut untuk ide dan bantuan lainnya.