Cara menggunakan grid css trick

Saya suka CSS Grid. Saya suka bagaimana, hanya dengan beberapa baris kode, kita dapat mencapai tata letak kisi yang sepenuhnya responsif, seringkali tanpa kueri media sama sekali. Saya cukup nyaman memperdebatkan CSS Grid untuk menghasilkan tata letak yang menarik, sambil menjaga markup HTML tetap bersih dan sederhana.

Namun baru-baru ini, saya dihadapkan dengan teka-teki UI yang unik untuk dipecahkan. Pada dasarnya, sel kisi mana pun dapat memiliki tombol yang akan membuka area lain yang lebih besar yang juga merupakan bagian dari kisi. Tetapi sel grid baru yang lebih besar ini harus:

1. tepat di bawah sel yang membukanya, dan
2. lebar penuh.

Ternyata ada solusi yang bagus untuk itu, dan dalam semangat CSS Grid itu sendiri, itu hanya melibatkan beberapa baris kode. Pada artikel ini, saya akan menggabungkan tiga "trik" CSS Grid satu baris untuk menyelesaikannya. Tidak diperlukan JavaScript sama sekali.

Penjelasan tentang masalah sebenarnya yang harus saya selesaikan

Berikut adalah contoh UI minimalis tentang apa yang perlu saya lakukan:

Ini adalah kisi kartu produk kami yang sebenarnya, seperti yang dirender di perpustakaan komponen Buku Cerita kami:

Setiap kartu produk membutuhkan tombol "tampilan cepat" baru yang ditambahkan sedemikian rupa sehingga, ketika diklik, akan:

• secara dinamis "menyuntikkan" kartu lebar penuh baru (berisi informasi produk yang lebih detail) tepat di bawah kartu produk yang diklik,
• tanpa mengganggu kisi kartu yang ada (yaitu mempertahankan urutan sumber DOM dan urutan visual kartu yang dirender di browser), dan
• masih sepenuhnya responsif.

Hmmm… apakah ini mungkin dengan implementasi CSS Grid kita saat ini?

Tentunya saya perlu menggunakan JavaScript untuk menghitung ulang posisi kartu, dan memindahkannya, terutama pada pengubahan ukuran browser? Benar?

Google bukan teman saya. Saya tidak dapat menemukan apa pun untuk membantu saya. Bahkan pencarian implementasi "tampilan cepat" hanya menghasilkan contoh yang menggunakan modals atau overlay untuk merender kartu yang disuntikkan. Lagi pula, modal biasanya satu-satunya pilihan dalam situasi seperti ini, karena modal memfokuskan pengguna pada konten baru, tanpa perlu mengganggu sisa halaman.

Saya tidur pada masalah, dan akhirnya sampai pada solusi yang bisa diterapkan dengan menggabungkan beberapa fitur CSS Grid yang paling kuat dan berguna.

Trik Grid CSS #1

Saya sudah menggunakan trik pertama untuk sistem grid default kami, dan grid kartu produk adalah contoh spesifik dari pendekatan itu. Berikut beberapa kode (yang disederhanakan):

 .grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, 20rem); }

"Saus rahasia" dalam kode ini adalah grid-template-columns: repeat(auto-fit, 20rem); yang memberi kita kisi dengan kolom ( 20rem dalam contoh ini) yang diatur secara otomatis di ruang yang tersedia, membungkus ke baris berikutnya ketika tidak ada cukup ruang.

Penasaran dengan auto-fit vs auto-fill ? Sara Soueidan telah menulis penjelasan yang luar biasa tentang cara kerjanya . Sara juga menjelaskan bagaimana Anda dapat menggabungkan minmax() untuk mengaktifkan lebar kolom menjadi "melenturkan" tetapi, untuk tujuan artikel ini, saya ingin mendefinisikan lebar kolom tetap untuk kesederhanaan.

Trik Grid CSS #2

Selanjutnya, saya harus mengakomodasi kartu lebar penuh baru ke dalam kisi:

 .fullwidth { grid-column: 1 / -1; }

Kode ini berfungsi karena grid-template-columns di trik #1 membuat grid "eksplisit", jadi mungkin untuk menentukan kolom awal dan akhir untuk .fullwidth , di mana

 .fullwidth { grid-column: 1 / -1; }

Besar. Kartu lebar penuh disuntikkan ke dalam kisi. Tapi … sekarang kami memiliki celah di atas kartu lebar penuh.

Trik Grid CSS #3

Mengisi celah — Saya telah melakukan ini sebelumnya dengan pendekatan pasangan bata palsu:

 .grid { grid-auto-flow: dense; }

Itu dia! Tata letak yang diperlukan tercapai.

Properti

 .fullwidth { grid-column: 1 / -1; }

 .fullwidth { grid-column: 1 / -1; }

• Semua kolom grid kami memiliki lebar yang sama . Pengepakan padat juga berfungsi jika lebar kolom fleksibel, misalnya dengan menggunakan

   .fullwidth { grid-column: 1 / -1; }

  3 .
• Semua "sel" kisi kami memiliki ketinggian yang sama di setiap baris. Ini adalah perilaku Grid CSS default. Wadah grid secara implisit memiliki

   .fullwidth { grid-column: 1 / -1; }

  4 menyebabkan sel menempati 100% dari tinggi baris yang tersedia.

Hasil dari semua ini adalah lubang di kisi kita terisi — dan bagian yang indah adalah urutan sumber asli dipertahankan dalam output yang diberikan. Ini penting dari perspektif aksesibilitas.

Lihat MDN untuk penjelasan lengkap tentang cara kerja penempatan otomatis Grid CSS .

Solusi lengkapnya

Penggantian Penyematan CodePen

Ketiga trik gabungan ini memberikan solusi tata letak sederhana yang membutuhkan sangat sedikit CSS. Tidak ada kueri media, dan tidak perlu JavaScript.

Tapi… kita masih butuh JavaScript?

Ya, kami melakukannya. Tetapi tidak untuk perhitungan tata letak apa pun. Ini murni berfungsi untuk mengelola acara klik, status fokus, tampilan kartu yang disuntikkan, dll.

Untuk tujuan demo dalam prototipe, kartu lebar penuh telah dikodekan dalam HTML di lokasi yang benar di DOM, dan JavaScript hanya mengaktifkan properti tampilannya.

Namun, dalam lingkungan produksi, kartu yang disuntikkan mungkin akan diambil dengan JavaScript dan ditempatkan di lokasi yang benar. Tata letak kisi untuk sesuatu seperti produk di situs eCommerce cenderung memiliki DOM yang sangat berat, dan kami ingin menghindari penambahan berat halaman yang tidak perlu dengan banyak konten "tersembunyi" tambahan.

Tampilan cepat harus dianggap sebagai peningkatan progresif , jadi jika JavaScript gagal dimuat, pengguna cukup diarahkan ke halaman detail produk yang sesuai.

Pertimbangan aksesibilitas

Saya bersemangat menggunakan markup HTML semantik yang benar, menambahkan

 .fullwidth { grid-column: 1 / -1; }

Jadi, inilah ikhtisar pertimbangan yang membuat pola ini dapat diakses semudah mungkin:

• Kisi kartu produk menggunakan

   .fullwidth { grid-column: 1 / -1; }

  6 karena kami menampilkan daftar produk. Oleh karena itu, teknologi bantu (misalnya pembaca layar) akan memahami bahwa ada hubungan antara kartu, dan pengguna akan diberi tahu berapa banyak item yang ada dalam daftar.
• Kartu produk itu sendiri adalah

   .fullwidth { grid-column: 1 / -1; }

  7 , dengan judul yang tepat, dll.
• Urutan sumber HTML dipertahankan untuk kartu saat .fullwidth disuntikkan, memberikan urutan tab alami yang baik ke dalam konten yang disuntikkan, dan keluar lagi ke kartu berikutnya.
• Seluruh petak kartu dibungkus dalam wilayah

   .fullwidth { grid-column: 1 / -1; }

  9 sehingga perubahan DOM diumumkan ke pembaca layar.
• Manajemen fokus memastikan bahwa kartu yang disuntikkan menerima fokus keyboard, dan saat menutup kartu, fokus keyboard dikembalikan ke tombol yang awalnya memicu visibilitas kartu.

Meskipun tidak ditunjukkan dalam prototipe, peningkatan tambahan ini dapat ditambahkan ke implementasi produksi apa pun:

• Pastikan kartu yang disuntikkan, saat difokuskan, memiliki label yang sesuai. Ini bisa sesederhana memiliki heading sebagai elemen pertama di dalam konten.
• Ikat kunci ESC untuk menutup kartu yang disuntikkan.
• Gulir jendela browser sehingga kartu yang disuntikkan terlihat sepenuhnya di dalam viewport.

Membungkus

Jadi apa yang Anda pikirkan?

Ini bisa menjadi alternatif yang bagus untuk modals ketika kami ingin mengungkapkan konten tambahan, tetapi tanpa membajak seluruh viewport dalam prosesnya. Ini mungkin menarik dalam situasi lain juga — pikirkan keterangan foto dalam kotak gambar, teks pembantu, dll. Bahkan mungkin menjadi alternatif untuk beberapa kasus di mana kita biasanya meraih

 .grid { grid-auto-flow: dense; }

 .grid { grid-auto-flow: dense; }

Bagaimanapun, saya tertarik pada bagaimana Anda dapat menggunakan ini, atau bahkan bagaimana Anda dapat mendekatinya secara berbeda. Beri tahu saya di komentar!

Pos Bagian yang Dapat Diperluas Dalam Grid CSS muncul pertama kali di CSS-Tricks . Anda dapat mendukung Trik-CSS dengan menjadi Pendukung MVP .

Apa itu grid di CSS?

Apa itu grid track?

Apa itu grid template Column?

Apa itu grid dalam HTML?