Beberapa minggu yang lalu, saya berbicara di
Frontend NE di Newcastle dan menjelaskan sebagian besar fitur apa yang akan ada di CSS Grid Subgrid dari Grid Level 2. Karena tidak memiliki implementasi properti ini (di browser), saya memodelkan banyak demo menggunakan DevTools, untuk itu pertunjukan.
Dalam perjalanan ke San Francisco di Smashing Conf, di mana saya melakukan lokakarya Layout CSS, saya diberi akses ke uji coba Firefox Nightly, yang memiliki implementasi awal dari properti ini.
Ini berarti bahwa saya perlu mengulang beberapa slide untuk penampilan saya di bulan Mei, screenshot nyata akan digunakan di sana.
Saya memposting beberapa screenshot di Twitter dan saya akan memposting semua contoh saya di
Grid dengan Contoh , segera setelah properti CSS Grid Subgrid bekerja dengan bendera di rakitan utama Firefox Nigtly. Namun, untuk semua orang yang memiliki hal-hal yang lebih penting untuk dilakukan daripada menonton Twitter selama akhir pekan, berikut adalah beberapa tangkapan layar. Mereka berisi tautan ke contoh
My CodePen sehingga Anda dapat melihat kode untuk elemen Subgrid (subgrid). Saya menyoroti Grid (kotak) dan Subgrid (subgrid) di Firefox DevTools untuk membantu Anda melihat apa yang perlu Anda lihat.
Kisi untuk kolom dan baris
Dalam hal ini, subgrid ada di kolom dan baris elemen induk. Ini berarti bahwa di wilayah subgrid tidak ada kisi tersembunyi, karena kedua ukuran terikat ke trek induk yang tersedia.
CodePen - Kisi untuk kolom dan barisKolom hanya jala
Dalam hal ini, saya menggunakan subgrid untuk kolom. Ini berarti bahwa saya dapat menggunakan trek mesh implisit untuk menambahkan garis sebanyak yang diperlukan untuk elemen. Baris menggunakan ukurannya sendiri sebagai grid bersarang tanpa subnet.
CodePen - Kotak Kolom SajaSubnet saja
Dalam hal ini, saya membuat baris subgrid dan mendefinisikan kolom, seperti biasa dalam fr unit.
Seperti yang Anda lihat, jalur kolom tidak cocok dengan yang induknya, karena mereka menggunakan definisi kisi mereka sendiri.
CodePen - Subgrid hanya untuk stringSaya sangat senang melihat kemajuan dalam pengembangan CSS Grid Subgrid, serta kesempatan untuk membicarakannya di seminar dan laporan saya.
Informasi lebih lanjut tentang Subgrid dapat ditemukan di tautan ini: