Subgrid CSS

Petak CSS adalah mesin tata letak yang sangat canggih, tetapi jalur baris dan kolom yang dibuat di petak induk hanya dapat digunakan untuk memosisikan turunan langsung penampung petak. Setiap area dan garis petak bernama yang ditentukan penulis tidak akan muncul di elemen lain selain turunan langsung. Dengan subgrid, ukuran trek, template, dan nama dapat dibagikan dengan petak bertingkat. Artikel ini menjelaskan cara kerjanya.

Sebelum subgrid, konten sering kali disesuaikan secara manual untuk menghindari tata letak tidak rapi seperti ini.

Tiga kartu ditampilkan berdampingan, masing-masing berisi tiga bit konten: header, paragraf, dan link. Masing-masing memiliki panjang teks yang berbeda, membuat beberapa keselarasan canggung pada kartu saat mereka duduk berdampingan satu sama lain.

Setelah subgrid, penyelarasan konten dengan ukuran yang bervariasi dapat dilakukan.

Tiga kartu ditampilkan berdampingan, masing-masing berisi tiga bit konten: header, paragraf, dan link. Masing-masing memiliki panjang teks yang berbeda, tetapi subgrid telah memperbaiki perataan dengan mengizinkan item konten tertinggi dari setiap item konten untuk menyetel tinggi baris, sehingga memperbaiki masalah perataan.

Dukungan Browser

  • 117
  • 117
  • 71
  • 16

Sumber

Dasar-dasar subgrid

Berikut adalah kasus penggunaan sederhana yang memperkenalkan dasar-dasar CSS subgrid. Grid ditentukan dengan dua kolom bernama, yang pertama selebar 20ch dan yang kedua adalah "sisa" dari 1fr ruang. Nama kolom tidak wajib, tetapi cocok untuk tujuan ilustrasi dan pendidikan.

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: [column-1] 20ch [column-2] 1fr;
}

Kemudian, turunan dari petak tersebut, yang membentangkan dua kolom tersebut, ditetapkan sebagai penampung petak, dan mengadopsi kolom induknya dengan menetapkan grid-template-columns ke subgrid.

.grid > .subgrid {
  grid-column: span 2;

  display: grid;
  grid-template-columns: subgrid; /* 20ch 1fr */
}
Screenshot DevTools petak CSS, yang menampilkan dua kolom secara berdampingan dengan nama di awal baris kolomnya.
https://codepen.io/web-dot-dev/pen/NWezjXv

Itu saja, kolom {i>induk grid<i} telah secara efektif diturunkan satu tingkat ke subgrid. Subgrid ini sekarang dapat menetapkan turunan ke salah satu kolom tersebut.

Tantangan! Ulangi demo yang sama, tetapi lakukan untuk grid-template-rows.

Bagikan petak "makro" tingkat halaman

Desainer sering menggunakan petak bersama, menggambar garis di seluruh desain, menyelaraskan elemen apa pun yang mereka inginkan. Kini developer web juga bisa! Sekarang, alur kerja yang tepat ini dapat dicapai, dan banyak lagi.

Dari petak makro hingga desain akhir. Area bernama petak dibuat di awal dan komponen selanjutnya ditempatkan sesuai keinginan.

Menerapkan alur kerja petak desainer yang paling umum dapat memberikan insight yang sangat baik tentang kemampuan, alur kerja, dan potensi subgrid.

Berikut screenshot yang diambil dari Chrome DevTools dari petak makro tata letak halaman seluler. Garis memiliki nama dan ada area yang jelas untuk penempatan komponen.

Screenshot dari DevTools petak CSS Chrome yang menampilkan tata letak petak berukuran seluler dengan baris dan kolom diberi nama untuk identifikasi cepat: fullbleed, status sistem, navigasi utama, header-utama, utama, footer, dan gestur-sistem.

CSS berikut membuat petak ini, dengan baris dan kolom bernama untuk tata letak perangkat. Setiap baris dan kolom memiliki ukuran.

.device {
    display: grid;
    grid-template-rows:
      [system-status] 3.5rem
      [primary-nav] 3rem
      [primary-header] 4rem
      [main] auto
      [footer] 4rem
      [system-gestures] 2rem
    ;
    grid-template-columns: [fullbleed-start] 1rem [main-start] auto [main-end] 1rem [fullbleed-end];
}

Beberapa gaya tambahan memberikan desain berikut.

Overlay petak CSS DevTools yang sama seperti sebelumnya, tetapi kali ini dengan beberapa UI sistem seluler yang ada, beberapa bayangan dan sedikit warna. Membantu melihat ke mana arah desain.

Dalam induk ini, terdapat berbagai elemen bertingkat. Desain membutuhkan gambar lebar penuh di bawah baris navigasi dan header. Nama baris kolom kiri dan kanan terjauh adalah fullbleed-start dan fullbleed-end. Penamaan garis petak dengan cara ini memungkinkan turunan untuk menyelaraskan setiap garis secara bersamaan dengan singkatan penempatan fullbleed. Ini sangat nyaman seperti yang akan segera Anda lihat.

Screenshot overlay petak dari DevTools yang diperbesar secara khusus, yang secara khusus berfokus pada nama kolom awal dan akhir penuh.

Dengan keseluruhan tata letak perangkat yang dibuat dengan baris dan kolom bernama yang bagus, gunakan subgrid untuk meneruskan baris dan kolom yang diberi nama dengan baik ke tata letak petak bertingkat. Inilah momen ajaib subgrid. Tata letak perangkat meneruskan baris dan kolom bernama ke penampung aplikasi, yang kemudian meneruskannya ke setiap turunannya.

.device > .app,
.app > * {
    display: grid;
    grid: subgrid / subgrid;

    /* same as */
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
}

Subgrid CSS adalah nilai yang digunakan sebagai pengganti daftar jalur petak. Baris dan kolom yang direntangkan elemennya dari induknya, sekarang merupakan baris dan kolom yang sama yang ditawarkannya. Hal ini membuat nama baris dari petak .device tersedia untuk turunan .app, bukan hanya .app. Elemen di dalam .app tidak dapat mereferensikan jalur petak yang dibuat oleh .device sebelum subgrid.

Setelah semua ini ditentukan, gambar bertingkat kini dapat memenuhi tata letak penuh dari tata letak berkat subgrid. Tidak ada nilai atau trik negatif, sebagai gantinya satu baris yang bagus yang bertuliskan “tata letak saya membentang dari fullbleed-start hingga fullbleed-end”.

.app > main img {
    grid-area: fullbleed;
}
Tata letak makro yang sudah selesai, lengkap dengan gambar bertingkat dengan lebar penuh yang berada tepat di bawah baris navigasi dan header utama, serta meluas ke setiap baris kolom bernama dari sisi penuh.
https://codepen.io/web-dot-dev/pen/WNLyjzX

Itu dia, kisi-kisi makro seperti yang digunakan desainer, diimplementasikan dalam CSS. Konsep ini dapat diskalakan dan tumbuh bersama Anda sesuai kebutuhan.

Memeriksa dukungan

{i>Progressive enhancement <i}dengan CSS dan subgrid sudah familier dan lugas. Gunakan @supports dan di dalam tanda kurung, tanyakan kepada browser apakah browser memahami subgrid sebagai nilai untuk kolom atau baris template. Contoh berikut memeriksa apakah properti grid-template-columns mendukung kata kunci subgrid, yang jika benar, berarti subgrid dapat digunakan

@supports (grid-template-columns: subgrid) {
  /* safe to enhance to */
}

Devtools

Chrome, Edge, Firefox, dan Safari memiliki DevTools petak CSS yang bagus, dan Chrome, Edge, serta Firefox memiliki alat khusus untuk membantu subgrid. Chrome mengumumkan alatnya pada tahun 115 sementara Firefox telah memilikinya selama satu tahun atau lebih.

Pratinjau screenshot badge subgrid yang ditemukan pada elemen di panel Elemen.

Badge subgrid berfungsi seperti badge petak, tetapi secara visual membedakan petak yang merupakan subgrid dan yang bukan.

Referensi

Daftar ini adalah kompilasi artikel subgrid, demo, dan inspirasi keseluruhan untuk memulai. Jika Anda mencari langkah selanjutnya untuk pendidikan subgrid, bersenang-senanglah mempelajari semua referensi hebat ini!