Subgrid CSS

Petak CSS adalah mesin tata letak yang sangat canggih, namun baris dan trek kolom yang dibuat di petak induk hanya dapat digunakan untuk memosisikan turunan dari penampung grid. Setiap penulis menentukan area kisi bernama dan garis hilang pada elemen selain turunan langsung. Dengan subgrid, ukuran, template, dan nama jalur dapat dibagikan dengan petak bertingkat. Artikel ini menjelaskan cara kerjanya.

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

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

Dasar-dasar subgrid

Berikut adalah kasus penggunaan sederhana yang memperkenalkan dasar-dasar CSS subgrid. J petak ditentukan dengan dua kolom bernama, yang pertama memiliki lebar 20ch dan yang kedua adalah "sisanya" dari ruang 1fr. Nama kolom tidak diperlukan tetapi bagus untuk tujuan ilustrasi dan edukasi.

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

Lalu, turunan petak tersebut, yang membentangkan 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 */
}

Selesai, kolom petak induk telah diteruskan secara efektif ke tingkat subpetak. Subkisi ini sekarang dapat menetapkan turunan ke salah satu kolom tersebut.

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

Membagikan "makro" tingkat halaman petak

Desainer sering bekerja dengan {i>grid<i} bersama, menggambar garis di seluruh desain, menyelaraskan elemen apa pun yang mereka inginkan. Sekarang pengembang web juga bisa! Persis ini kini dapat dicapai, dan banyak lagi.

Mengimplementasikan alur kerja {i>grid<i} desainer paling umum dapat memberikan insight tentang kemampuan, alur kerja, dan potensi subgrid.

Berikut screenshot yang diambil dari Chrome DevTools terkait makro tata letak halaman seluler {i>grid.<i} Garis-garis memiliki nama dan ada area yang jelas untuk penempatan komponen.

CSS berikut membuat petak ini, dengan baris dan kolom bernama untuk perangkat tata letak. 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 lebar penuh di bawah baris navigasi dan header. Kolom kiri dan kanan terjauh nama baris adalah fullbleed-start dan fullbleed-end. Beri nama garis petak dengan cara ini memungkinkan turunan menyelaraskan setiap elemen secara bersamaan dengan penempatan singkatan dari fullbleed. Cara ini sangat praktis, seperti yang akan Anda lihat nanti.

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

.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 yang sama dan kolom yang ditawarkannya. Tindakan ini membuat nama baris dari petak .device tersedia ke turunan .app, bukan hanya .app. Elemen di dalam .app adalah tidak dapat mereferensikan trek petak yang dibuat oleh .device sebelum subgrid.

Setelah menentukan semua ini, gambar yang disarangkan sekarang dapat memenuhi ruang aset berkat subgrid. Tidak ada nilai negatif atau trik, yang bagus satu baris yang bertuliskan “tata letak saya mencakup fullbleed-start hingga fullbleed-end”.

.app > main img {
    grid-area: fullbleed;
}

Jadi, itulah petak makro seperti yang digunakan desainer, yang diimplementasikan dalam CSS. Ini yang dapat diskalakan dan tumbuh bersama Anda sesuai kebutuhan.

Memeriksa dukungan

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

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

Devtools

Chrome, Edge, Firefox, dan Safari semuanya memiliki DevTools petak CSS yang bagus, dan Chrome, Edge, dan Firefox memiliki alat khusus untuk membantu subpetak. Chrome diumumkan alat mereka dalam 115 sementara Firefox telah memilikinya selama setahun atau lebih.

Lencana subgrid bertindak seperti lencana {i>grid<i} tetapi secara visual membedakan {i>grid<i} adalah {i>subgrid<i} dan mana yang tidak.

Resource

Daftar ini adalah kompilasi artikel subkisi, demo, dan keseluruhan inspirasi untuk memulai. Jika Anda mencari langkah berikutnya untuk subkisi edukasi, selamat mencoba semua referensi yang luar biasa ini!

• MDN
• Rachel Andrew dengan teks yang selaras
• Rachel Andrew dengan 10 contoh bagus
• Rachel Andrew dengan situs contoh
• Artikel Ahmad Shadeed
• Michelle Barker di CSS Day 2022
• {i>Cards<i} (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 penyelarasan formulir
• Chris Coyier dengan menyelaraskan penanda item daftar
• Michelle Barker muncul dari container agar sejajar dengan petak induk
• Miriam Suzanne menampilkan nama garis yang telah diberi nama dan interaksi subgrid
• Kevin Powell dengan dasar-dasar area bernama
• Kevin Powell dengan daftar yang diselaraskan
• Shannon Moeller dengan daftar yang diselaraskan
• Kevin Powell dengan petak tingkat halaman yang diteruskan ke komponen
• Elad Shechter dengan overlay dan penggantian devtool
• Aaron Iker dengan penggunaan sub-petak tipografi yang bagus untuk perataan dasar pengukuran catatan kaki
• Adam Argyle dengan gambar fullble di dalam artikel