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.

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

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 */
}

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.

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.

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.

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.

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;
}

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.

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.

• MDN
• Rachel Andrew dengan teks yang rata
• Rachel Andrew dengan 10 contoh bagus
• Rachel Andrew dengan situs contoh
• Artikel Ahmad Shadeed
• Michelle Barker di Hari CSS 2022
• Kartu
  • Codepen dari Jhey
  • Codepen oleh Ahmad Shadeed
  • Codepen oleh Takeshi Kano
  • Codepen dari Arvid
  • Codepen oleh Chris Coyier
  • Codepen oleh Miriam Suzanne
• Chris Coyier dengan formulir
• Facundo Corradini dengan perataan formulir
• Chris Coyier dengan menyelaraskan penanda item daftar
• Michelle Barker keluar dari container agar sejajar dengan petak induk
• Miriam Suzanne yang menunjukkan interaksi subgrid dan nama baris bernama
• Kevin Powell dengan dasar-dasar area bernama
• Kevin Powell dengan daftar yang diselaraskan
• Shannon Moeller dengan daftar yang disesuaikan
• Kevin Powell dengan petak tingkat halaman yang diturunkan ke komponen
• Elad Shechter dengan overlay dan penggantian devtool
• Aaron Iker dengan penggunaan subgrid tipografi yang bagus untuk perataan dasar catatan kaki
• Adam Argyle dengan gambar fullbleed di dalam artikel

Bagian dari Rangkaian yang baru dapat dioperasikan