Halaman ini diterjemahkan oleh Cloud Translation API.

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.

Tiga kartu ditampilkan secara berdampingan, masing-masing dengan tiga bit konten:
{i>header<i}, paragraf, dan tautan. Masing-masing memiliki panjang teks
yang berbeda, sehingga
susunan yang canggung pada kartu-kartu saat mereka duduk berdampingan.

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

Tiga kartu ditampilkan secara berdampingan, masing-masing dengan tiga bit konten:
{i>header<i}, paragraf, dan tautan. Masing-masing memiliki panjang teks yang berbeda, tetapi subkisi memiliki
memperbaiki perataan dengan memungkinkan yang tertinggi dari setiap item konten menyetel baris
tinggi, memperbaiki masalah perataan.

Dukungan Browser

Sumber

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

Screenshot DevTools petak CSS, yang menampilkan dua kolom berdampingan dengan nama di awal garis kolomnya. — https://codepen.io/web-dot-dev/pen/NWezjXv

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.

Dari petak makro hingga desain akhir. Area bernama petak dibuat di awal dan yang lebih baru ditempatkan sesuai keinginan.

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.

J
screenshot dari DevTools petak CSS Chrome yang menampilkan tata letak petak berukuran seluler
di mana baris dan kolom diberi nama untuk
identifikasi cepat: {i>fullbleed<i},
system-status, primary-nav, primary-header, main, footer, dan gestur sistem.

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.

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

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.

J
memperbesar screenshot overlay grid dari DevTools, yang berfokus secara khusus pada
nama kolom {i>fullbleed-start<i} dan {i>fullbleed-end<i}.

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

Tata letak makro yang sudah selesai, lengkap dengan gambar bersarang lebar penuh yang menempati dengan benar baris navigasi dan tajuk utama serta memanjang ke setiap baris kolom bernama lengkap. — https://codepen.io/web-dot-dev/pen/WNLyjzX

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.

Pratinjau screenshot badge subgrid yang ditemukan pada elemen di Elemen
.

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!