Halaman ini diterjemahkan oleh Cloud Translation API.

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 penulis yang menentukan area petak dan garis bernama hilang pada elemen selain turunan langsung. Dengan subgrid, penentuan ukuran, template, dan nama trek 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 ini.

Tiga kartu ditampilkan berdampingan, masing-masing dengan tiga bit konten:
header, paragraf, dan link. Masing-masing memiliki panjang teks yang berbeda, menciptakan
beberapa penyelarasan yang canggung pada kartu saat ditempatkan berdampingan.

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

Tiga kartu ditampilkan berdampingan, masing-masing dengan tiga bagian konten:
header, paragraf, dan link. Masing-masing memiliki panjang teks yang berbeda, tetapi subpetak telah
memperbaiki perataan dengan memungkinkan item konten tertinggi dari setiap item konten untuk menetapkan tinggi
baris, sehingga memperbaiki masalah perataan.

Dukungan Browser

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 dapat digunakan untuk tujuan ilustrasi dan edukasi.

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

Kemudian, turunan petak tersebut, membentang pada dua kolom tersebut, ditetapkan sebagai penampung petak, dan menggunakan 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 petak "makro" tingkat halaman

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

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

Mengimplementasikan alur kerja petak desainer 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. 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,
system-status, primary-nav, primary-header, main, 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, beberapa bayangan, dan sedikit warna. Membantu melihat
ke mana arah desain.

Di dalam induk ini, terdapat berbagai elemen bertingkat. Desainnya membutuhkan gambar lebar penuh di bawah baris navigasi dan {i>header<i}. Nama baris kolom paling kiri dan kanan adalah fullbleed-start dan fullbleed-end. Penamaan garis petak dengan cara ini memungkinkan turunan diselaraskan ke masing-masing secara bersamaan dengan singkatan penempatan fullbleed. Hal ini sangat praktis, seperti yang akan Anda lihat nanti.

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

Dengan tata letak perangkat secara keseluruhan yang dibuat dengan baris dan kolom bernama yang bagus, gunakan subgrid untuk meneruskan baris dan kolom bernama lengkap ke tata letak petak bertingkat. Ini adalah 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 elemen 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 trek petak yang dibuat oleh .device sebelum subgrid.

Dengan semua ini ditentukan, gambar bertingkat kini dapat dicetak penuh dalam tata letak berkat subgrid. Tidak ada nilai atau trik negatif, melainkan satu baris yang bagus yang bertuliskan “tata letak saya mencakup dari 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. Konsep ini dapat diskalakan dan berkembang bersama Anda sesuai kebutuhan.

Memeriksa dukungan

{i>Progressive enhancement <i}dengan CSS dan subgrid sudah dikenal dan mudah dilakukan. Gunakan @supports dan di dalam tanda kurung, tanyakan browser apakah browser memahami sub-petak sebagai nilai untuk kolom atau baris template. Contoh berikut memeriksa apakah properti grid-template-columns mendukung kata kunci subgrid. Jika benar, subgrid dapat digunakan

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

Developer Tools

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

Pratinjau screenshot badge sub-petak yang ditemukan pada elemen di panel
Elemen.

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

Resource

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