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 petak dan garis bernama yang ditentukan penulis tidak ditemukan pada elemen lain selain turunan langsung. Dengan subgrid, ukuran jalur, template, dan nama dapat dibagikan dengan petak bertingkat. Artikel ini menjelaskan cara kerjanya.

Sebelum subgrid, konten sering disesuaikan dengan tangan untuk menghindari tata letak tidak rapi seperti ini.

Tiga kartu ditampilkan berdampingan, masing-masing dengan tiga bit konten: header, paragraf, dan link. Tiap-tiap kartu memiliki panjang teks yang berbeda, sehingga membuat beberapa perataan aneh pada kartu saat saling berdampingan.

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

Tiga kartu ditampilkan berdampingan, masing-masing dengan 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. Petak ditentukan dengan dua kolom bernama, yang pertama selebar 20ch dan yang kedua adalah "sisa" ruang 1fr. Nama kolom tidak wajib, tetapi bagus 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 membentang di kedua 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 petak induk telah secara efektif diturunkan satu tingkat ke sub petak. Sub-grid 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 bekerja dengan petak bersama, menggambar garis di seluruh desain, menyelaraskan elemen apa pun yang mereka inginkan. Sekarang developer web juga bisa! Alur kerja yang tepat ini sekarang dapat dicapai, dan banyak lagi.

Dari petak makro hingga desain jadi. 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 adalah screenshot yang diambil dari Chrome DevTools dari petak makro tata letak halaman seluler. Baris memiliki nama dan 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 yang diberi nama 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 tersedia, dengan beberapa bayangan dan sedikit warna. Membantu melihat ke mana arah desain Anda.

Di dalam induk ini, terdapat berbagai elemen bertingkat. Desain ini memerlukan gambar dengan 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 menyelaraskan setiap baris secara bersamaan dengan singkatan penempatan fullbleed. Ini sangat nyaman seperti yang akan Anda lihat.

Screenshot overlay petak dari DevTools yang diperbesar, yang secara khusus berfokus pada nama kolom fullbleed-start dan fullbleed-end.

Dengan tata letak perangkat keseluruhan yang dibuat dengan baris dan kolom bernama menarik, gunakan subgrid untuk meneruskan baris dan kolom yang diberi nama dengan baik ke tata letak petak bertingkat. Inilah momen subgrid ajaib. Tata letak perangkat meneruskan baris dan kolom yang diberi nama 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 elemen dari induknya, sekarang merupakan baris dan kolom yang sama yang ditawarkannya. 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 menentukan semua ini, gambar bertingkat kini dapat memenuhi seluruh ruang aset dalam 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 telah selesai, lengkap dengan gambar bersarang lebar penuh yang berada tepat di bawah baris navigasi utama dan header serta memanjang ke setiap baris kolom bernama dari fullbleed.
https://codepen.io/web-dot-dev/pen/WNLyjzX

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

Memeriksa dukungan

{i>Progressive enhancement <i}dengan CSS dan subgrid sudah terbiasa dan mudah. Gunakan @supports dan di dalam tanda kurung, tanyakan 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 versi 115, sedangkan Firefox telah menggunakannya selama satu tahun atau lebih.

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

Badge subgrid berfungsi seperti badge petak, tetapi secara visual dapat membedakan petak mana yang merupakan subgrid dan mana yang tidak.

Referensi

Daftar ini adalah kompilasi artikel subgrid, demo, dan keseluruhan inspirasi untuk memulai. Jika Anda mencari langkah berikutnya untuk pendidikan sub-grid, bersenang-senanglah mempelajari semua referensi bagus ini.

Bagian dari Rangkaian yang baru dapat dioperasikan