Bahagian yang boleh dikembangkan dalam grid CSS

CSS Grid adalah alat yang hebat untuk membuat susun atur responsif dengan kod minimum, sering menghapuskan keperluan untuk pertanyaan media. Saya selesa menggunakannya untuk pelbagai susun atur, mengutamakan HTML bersih. Walau bagaimanapun, cabaran UI baru -baru ini membentangkan masalah yang unik: memperluaskan sel grid ke lebar penuh apabila butang diklik, sambil mengekalkan struktur grid asal dan respons.

Keperluannya ialah sel yang diperluaskan:

1. Muncul terus di bawah sel yang mencetuskan.
2. Menduduki lebar grid penuh.

Penyelesaiannya, menghairankan elegan, menggunakan hanya beberapa baris grid CSS. Artikel ini memperincikan tiga teknik grid CSS mudah untuk mencapai ini tanpa JavaScript.

Masalahnya: Kad produk yang boleh dikembangkan

Berikut adalah contoh mudah dari tugas UI: Perpustakaan komponen buku cerita kami mempunyai grid kad produk. Setiap kad memerlukan butang "Pandangan Pantas" untuk mendedahkan kad yang lebih besar dan penuh dengan maklumat produk terperinci. Pengembangan ini harus:

• Secara dinamik masukkan kad lebar penuh di bawah kad yang diklik.
• Memelihara susunan dom asal dan susunan grid visual.
• Tetap responsif sepenuhnya pada saiz semula penyemak imbas.

Pada mulanya, saya menganggap JavaScript diperlukan untuk menyusun semula kad. Pencarian dalam talian untuk pelaksanaan "paparan cepat" kebanyakannya menghasilkan penyelesaian modal atau overlay. Modal adalah perkara biasa untuk kandungan yang difokuskan, tetapi saya mahukan penyelesaian yang diintegrasikan dengan lancar dalam grid.

Penyelesaiannya datang dari menggabungkan beberapa ciri grid CSS yang kuat.

CSS Grid Trick #1: Lajur Auto-Fitting

Sistem grid sedia ada saya sudah menggunakan teknik ini:

 .Grid {
  paparan: grid;
  Gap: 1rem;
  Grid-template-lajur: Ulang (Auto-Fit, 20REM);
}

grid-template-columns: repeat(auto-fit, 20rem); Mewujudkan lajur (20rem lebar di sini) yang secara automatik menyesuaikan diri dengan ruang yang tersedia, membungkus ke baris baru seperti yang diperlukan. Penjelasan Sara Soueidan mengenai auto-fit vs auto-fill sangat baik. Untuk kesederhanaan, saya menggunakan lebar lajur tetap.

CSS Grid Trick #2: Rentang lebar penuh

Untuk menampung kad yang diperluaskan:

 .fullwidth {
  Grid -lajur: 1 / -1;
}

Sejak Trick #1 mencipta grid yang eksplisit, grid-column: 1 / -1; merangkumi keseluruhan lebar (dari lajur 1 hingga yang terakhir).

Walau bagaimanapun, ini meninggalkan jurang di atas kad lebar penuh.

CSS Grid Trick #3: Pembungkusan padat

Mengisi jurang ini menggunakan pendekatan palsu-Masonry:

 .Grid {
  grid-auto-aliran: padat;
}

grid-auto-flow: dense; Mengoptimumkan penempatan automatik, mengisi jurang lebih awal dalam grid. Ini berfungsi dengan berkesan apabila:

• Semua lajur mempunyai lebar yang sama (atau gunakan minmax() untuk lebar fleksibel).
• Semua sel dalam baris mempunyai ketinggian yang sama (lalai; align-items: stretch secara tersirat menjadikan sel-sel mengisi ketinggian baris).

Perintah DOM asal dipelihara, penting untuk aksesibiliti. MDN memberikan penjelasan komprehensif mengenai penempatan automatik grid CSS.

Penyelesaian lengkap

Tiga teknik ini mewujudkan susun atur yang mudah dan cekap dengan CSS yang minimum, tiada pertanyaan media, dan tiada JavaScript untuk pengiraan susun atur.

Peranan JavaScript

JavaScript tetap diperlukan, tetapi hanya untuk fungsi: Menguruskan peristiwa klik, fokus, dan memaparkan kad yang disuntik. Dalam prototaip, kad lebar penuh dikodkan keras; JavaScript mengubah penglihatan mereka.

Dalam persekitaran pengeluaran, kad itu mungkin akan diambil secara dinamik dan dimasukkan. Untuk mengelakkan kembung DOM, kandungan yang disuntik harus dianggap sebagai peningkatan progresif; Jika JavaScript gagal, pengguna diarahkan ke halaman Butiran Produk.

Pertimbangan Kebolehcapaian

Mengutamakan semantik HTML, ARIA Atribut, dan Navigasi Papan Kekunci:

• Menggunakan grid<ul> Untuk kejelasan semantik.</ul>
• Kad produk adalah<li> unsur -unsur dengan tajuk yang betul.</li> <li> Perintah DOM dipelihara untuk pesanan tab semulajadi.</li> <li> Pengurusan fokus memastikan navigasi papan kekunci yang betul. (Penambahbaikan selanjutnya boleh termasuk label eksplisit untuk kad yang disuntik, mengikat kunci <kbd>ESC</kbd> untuk menutup, dan menatal Viewport untuk memastikan penglihatan).</li>

Kesimpulan

Pendekatan ini menawarkan alternatif yang bersih kepada modal, mendedahkan kandungan tambahan tanpa mengaburkan halaman. Ia berguna untuk pelbagai senario, seperti kapsyen imej atau teks penolong, yang berpotensi menggantikan <details>/<summary></summary></details> Dalam beberapa kes. Saya tidak sabar untuk mendengar pendapat dan pendekatan alternatif anda.

Atas ialah kandungan terperinci Bahagian yang boleh dikembangkan dalam grid CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!