Menata Sel Kosong Dengan Konten yang Dihasilkan Dan Tata Letak Kotak CSS

Gotcha Tata Letak Kotak yang umum adalah ketika pendatang baru di metode tata letak bertanya-tanya bagaimana cara menata sel kotak yang tidak berisi konten apa pun. Dalam spesifikasi Level 1 saat ini, ini tidak mungkin karena tidak ada cara untuk menargetkan Sel Kotak atau Area Kotak kosong dan menerapkan gaya. Ini berarti bahwa untuk menerapkan gaya, Anda perlu memasukkan elemen.

Pada artikel ini, saya akan melihat bagaimana menggunakan CSS Generated Content untuk mencapai penataan sel kosong tanpa menambahkan elemen kosong yang berlebihan dan menunjukkan beberapa kasus penggunaan di mana teknik ini masuk akal.

Mengapa Kita Belum Bisa Menata Area Kosong?

Paragraf pembuka Spesifikasi Grid mengatakan,

“Modul CSS ini mendefinisikan sistem tata letak berbasis grid dua dimensi, dioptimalkan untuk desain antarmuka pengguna. Dalam model tata letak kisi, anak-anak dari wadah kisi dapat diposisikan ke dalam slot sewenang-wenang dalam kisi tata letak fleksibel atau ukuran tetap yang telah ditentukan sebelumnya.

Ungkapan kunci di sini adalah "anak-anak dari wadah kotak." Spesifikasi mendefinisikan pembuatan kisi pada elemen induk, di mana item anak dapat diposisikan. Itu tidak mendefinisikan gaya apa pun dari kisi itu, bahkan tidak sejauh menerapkan sesuatu seperti properti column-rule kita miliki di Tata Letak Multi-kolom. Kami menata item anak, dan bukan kisi itu sendiri, yang membuat kami perlu memiliki semacam elemen untuk menerapkan gaya itu.

Menggunakan Elemen yang Berlebihan Sebagai Kait Penataan

Salah satu cara untuk menyisipkan sesuatu ke gaya adalah dengan menyisipkan elemen redundan ke dalam dokumen, misalnya, span atau div. Pengembang cenderung tidak menyukai ide ini, terlepas dari kenyataan bahwa mereka telah menambahkan "pembungkus baris" yang berlebihan selama bertahun-tahun untuk mencapai tata letak kotak menggunakan pelampung. Mungkin elemen yang jelas-jelas kosong itu lebih tidak menyenangkan daripada redundansi elemen pembungkus yang agak tersembunyi!

Elemen yang benar-benar kosong menjadi item kisi dan dapat memiliki latar belakang dan batas yang ditambahkan seperti elemen yang berisi konten, seperti yang diperlihatkan contoh ini.

Eric Meyer, dalam artikelnya A List Apart Faux Grid Tracks, menganjurkan untuk menggunakan elemen b sebagai elemen pilihan Anda yang berlebihan, karena tidak memberikan makna semantik, pendek dan juga cukup jelas dalam markup sebagai pengait.

Memasukkan beberapa elemen div atau b tambahan tidak mungkin menjadi kejahatan terbesar terhadap markup bagus yang pernah Anda lakukan, jadi saya tidak akan kehilangan waktu untuk memilih pendekatan itu jika diperlukan. Pengembangan web sangat sering melibatkan pemilihan pendekatan yang paling tidak optimal untuk menyelesaikan pekerjaan sampai solusi yang lebih baik ditemukan. Namun saya lebih suka menyimpan gaya saya di satu tempat jika memungkinkan, dengan aman di lembar gaya. Jika tidak ada yang lain, akan lebih mudah untuk menggunakan kembali gaya, tidak perlu khawatir tentang markup tambahan yang diperlukan. Karena alasan inilah, saya cenderung melihat ke konten yang dihasilkan, sesuatu yang sangat saya kenal dari pekerjaan yang telah saya lakukan memformat buku dengan CSS, di mana Anda menghabiskan sebagian besar waktu Anda bekerja dengan fitur ini.

Menggunakan Konten yang Dihasilkan Sebagai Kait Penataan

Konten yang Dihasilkan CSS menggunakan kelas semu ::before dan ::after CSS bersama dengan properti content untuk menyisipkan beberapa jenis konten ke dalam dokumen. Ide memasukkan konten mungkin membuat Anda berpikir bahwa ini untuk menyisipkan teks, dan sementara ini memungkinkan, untuk tujuan kami, kami tertarik untuk memasukkan elemen kosong sebagai anak langsung dari Grid Container kami. Dengan elemen yang dimasukkan kita bisa menatanya.

Dalam contoh di bawah ini saya memiliki elemen penampung, yang akan menjadi Wadah Kotak saya, dengan elemen lain bersarang di dalamnya. Anak langsung tunggal ini akan menjadi Item Grid. Saya telah menetapkan tiga kolom, tiga baris kisi pada wadah dan kemudian memposisikan satu item menggunakan Garis Kisi, sehingga berada di Sel Kisi tengah.

 <div class="grid"> <div class="item"></div> </div>

 .grid { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; grid-gap: 10px; } .grid > * { border: 2px solid rgb(137,153,175); } .item { grid-column: 2; grid-row: 2; }

Jika kita melihat contoh ini, menggunakan Firefox Grid Inspector untuk melapisi Garis Grid, kita dapat melihat bagaimana sel kosong lainnya dari grid ada, namun, untuk menambahkan latar belakang atau batas ke dalamnya, kita perlu menambahkan anak tambahan elemen. Itulah yang memungkinkan Konten yang Dihasilkan.

Di CSS saya, saya menambahkan string kosong, ::before dan ::after Grid Container saya. Ini akan segera menjadi Item Grid dan meregang untuk mengisi wadah mereka. Saya kemudian menambahkan gaya yang saya butuhkan untuk kotak, dalam hal ini menambahkan warna latar belakang, dan memposisikannya seperti yang saya lakukan pada Item Kotak biasa.

 .grid::before { content: ""; background-color: rgb(214,232,182); grid-column: 3; grid-row: 1; } .grid::after { content: ""; background-color: rgb(214,232,182); grid-column: 1; grid-row: 3; } 

Dalam dokumen kita masih hanya memiliki satu elemen anak, elemen gaya yang berlebihan terkandung di dalam CSS, yang tampaknya sangat masuk akal karena hanya ada untuk tujuan penataan.

Batasan Pendekatan Konten yang Dihasilkan

Masalah yang jelas dengan pendekatan ini akan menjadi jelas jika Anda memutuskan Anda ingin juga menata Sel Grid kanan atas dan kiri bawah. Anda hanya dapat menerapkan satu bagian konten yang dihasilkan ke atas dan satu ke bagian bawah wadah, beberapa elemen semu ::before dan ::after tidak diperbolehkan. Metode ini tidak akan berhasil jika Anda ingin membuat sendiri papan catur Grid CSS! Jika Anda merasa perlu melakukan banyak penataan sel kosong maka untuk masa mendatang, pendekatan "Pengisi B" yang dijelaskan di atas kemungkinan akan menjadi pilihan terbaik Anda.

Metode konten yang dihasilkan juga dapat membingungkan pengembang masa depan yang mengerjakan proyek Anda. Karena kami menargetkan wadah, jika Anda menggunakan kembali kelas itu di tempat lain, itu akan membawa konten yang dihasilkan, ini berguna jika itu yang Anda inginkan. Pada contoh berikutnya, kita telah menambahkan garis dekoratif di kedua sisi heading, akan masuk akal bahwa setiap instance dari h1 akan memiliki garis tersebut. Akan tetapi, akan sangat membingungkan jika Anda tidak menyadari hal ini akan terjadi! Baris komentar di atas aturan penampung akan membantu di sini. Saya cenderung bekerja akhir-akhir ini di perpustakaan pola, yang benar-benar membantu komponen ini dengan rapi di satu tempat, membuatnya lebih jelas apa yang terjadi ketika kelas diterapkan ke elemen.

Judul Mewah

Salah satu trik konten yang dihasilkan favorit saya adalah untuk menata judul. Di masa lalu, saya harus mendorong kembali gaya heading yang membutuhkan pembungkus tambahan dan track pemosisian absolut untuk dicapai. Ketika konten berasal dari CMS, seringkali tidak mungkin untuk menambahkan pembungkus yang berlebihan itu.

Dengan Grid dan konten yang dihasilkan, kita dapat menambahkan garis di kedua sisi heading kita tanpa menambahkan markup tambahan. Garis akan tumbuh dan menyusut sesuai dengan ruang yang tersedia dan akan mundur dengan elegan ke header tengah yang polos saat Grid tidak tersedia di browser.

Markup kami adalah h1 sederhana.

 <h1>My heading</h1>

Dalam aturan untuk h1 saya membuat kotak tiga kolom. Nilai dari grid-template-columns memberikan track 1fr kemudian salah satu auto dan track terakhir 1fr . Dua trek 1fr akan berbagi ruang yang tersisa setelah judul mengambil ruang yang dibutuhkan untuk duduk di dalam trek berukuran auto .

Saya menambahkan properti text-align dengan nilai center agar heading saya dimasukkan di browser tanpa grid.

 h1 { text-align: center; display: grid; grid-template-columns: 1fr auto 1fr; grid-gap: 20px; }

Kami sekarang menambahkan konten yang kami buat, untuk menambahkan baris sebelum dan sesudah teks judul. Saya membungkus aturan ini dalam Kueri Fitur, jadi kami tidak mendapatkan konten aneh yang dihasilkan di browser tanpa tata letak kisi.

Garis itu sendiri adalah batas pada item yang dihasilkan.

 @supports (display: grid) { h1:before, h1:after { content: ""; align-self: center; border-top: 1px solid #999; } }

Itu saja yang perlu Anda lakukan! Anda dapat menggunakan teknik yang sama untuk menambahkan gaya apa pun, atau bahkan ikon di kedua sisi elemen, di atas atau di bawah elemen. Dengan menempatkan item Anda ke trek terpisah, Anda tahu bahwa tidak ada kemungkinan item tersebut akan tumpang tindih dengan teks judul Anda, yang cenderung menjadi masalah saat mencoba melakukan hal semacam ini dengan pemosisian absolut. Anda juga mendapat manfaat dari cara yang tepat agar item dapat disejajarkan satu sama lain dalam kisi.

Ini adalah contoh bagus dari peningkatan yang mungkin menggunakan tata letak kisi yang dapat Anda manfaatkan bahkan jika Anda belum siap untuk langsung mendesain ulang besar menggunakan kisi. Itu kembali dengan sangat baik ke judul yang lugas, orang-orang dengan browser yang mendukung mendapatkan sentuhan ekstra, dan semua orang mendapatkan kontennya. Pendekatan serupa diambil oleh Eric Meyer, menggunakan konten yang dihasilkan untuk menambahkan kutipan yang mudah ditata dan diposisikan ke elemen blockquote.

Dengan fitur kecil ini, saya sering tidak mulai berpikir bahwa saya akan menggunakan Tata Letak Kotak. Saat saya mulai mencari cara untuk mengimplementasikan desain saya, saya menyadari itu adalah metode tata letak yang harus dipilih. Karena alasan inilah saya mendorong orang untuk tidak menganggap Grid sebagai tata letak halaman di atas komponen jika Anda melakukannya, Anda mungkin kehilangan banyak peluang yang dapat membantu.

Menambahkan Latar Belakang Dan Batas Ke Area Desain Anda

Kami juga dapat menggunakan konten yang dihasilkan untuk menumpuk item; kenyataannya, lebih dari satu item dapat menempati sel grid tertentu. Ini dapat mencakup item-item yang disisipkan dengan konten yang dihasilkan.

Dalam contoh berikutnya, saya memiliki desain dengan dua bagian konten dan item lebar penuh. Di belakang konten adalah latar belakang yang juga berjalan di bawah item lebar penuh.

Markup memiliki wadah dengan bagian dan elemen lebar penuh sebagai turunan langsung, dan saya menggunakan penempatan berbasis garis untuk menempatkan item saya ke kisi.

 <article class="grid"> <section class="section1"> <p>…</p> </section> <div class="full-width"> <img src=“placeholder.jpg” alt=“Placeholder”> </div> <section class="section2"> <p>…</p> </section> </article>

 .grid { display: grid; grid-template-columns: 1fr 20px 4fr 20px 1fr; grid-template-rows: auto 300px auto; grid-row-gap: 1em; } .section1 { grid-column: 3; grid-row: 1; } .section2 { grid-column: 3; grid-row: 3; } .full-width { grid-column: 1 / -1; grid-row: 2; background-color: rgba(214,232,182,.5); padding: 20px 0; }

Ini memberi saya tata letak dengan gambar lebar penuh dan dua bagian konten ditempatkan; namun, jika saya menambahkan latar belakang ke bagian, itu akan berhenti di atas row-gap antara section dan gambar lebar penuh.

 .section { background-color: rgba(214,232,182,.3); border: 5px solid rgb(214,232,182); } 

Jika kita menghapus grid-row-gap dan menggunakan bantalan untuk membuat ruang, itu tetap tidak akan mengaktifkan efek latar belakang yang berjalan di bawah panel lebar penuh.

Di sinilah kita dapat menggunakan konten yang dihasilkan. Saya menambahkan konten yang dihasilkan ::before wadah kisi dan memberinya warna latar belakang. Jika saya tidak melakukan hal lain, ini akan memposisikan konten di sel pertama kisi.

 .grid::before { content: ""; background-color: rgba(214,232,182,.3); border: 5px solid rgb(214,232,182); } 

Saya kemudian dapat memposisikan konten menggunakan pemosisian berbasis garis untuk meregangkan area yang seharusnya menunjukkan warna latar belakang.

 .grid::before { content: ""; background-color: rgba(214,232,182,.3); border: 5px solid rgb(214,232,182); grid-column: 2 / 5; grid-row: 1 / 4; }

Contoh lengkapnya bisa kamu lihat di CodePen ini.

Mengontrol Tumpukan Dengan z-index

Pada contoh di atas, konten yang dihasilkan disisipkan dengan ::before . Ini berarti bahwa elemen lain datang setelahnya, itu ada di bagian bawah tumpukan dan akan ditampilkan di belakang sisa konten yang saya inginkan. Anda juga dapat menggunakan z-index untuk mengontrol tumpukan. Coba ubah pemilih ::before menjadi ::after . Latar belakang konten yang dihasilkan sekarang berada di atas segalanya, seperti yang Anda lihat dari cara batas berjalan di atas gambar. Ini karena sekarang telah menjadi hal terakhir dalam wadah grid, itu dicat terakhir dan muncul "di atas."

Untuk mengubahnya, Anda perlu memberikan elemen ini properti z-index yang lebih rendah daripada yang lainnya. Jika tidak ada hal lain yang memiliki nilai z-index , hal paling sederhana yang harus dilakukan adalah memberi konten yang Anda hasilkan z-index sebesar -1 . Ini akan menyebabkannya menjadi hal pertama di tumpukan, sebagai item dengan z-index terendah.

 .grid::after { z-index: -1; content: ""; background-color: rgba(214,232,182,.3); border: 5px solid rgb(214,232,182); grid-column: 2 / 5; grid-row: 1 / 4; }

Menambahkan latar belakang dengan cara ini tidak perlu dibatasi untuk menghilangkan latar belakang sepenuhnya di belakang konten Anda. Mampu memunculkan blok warna di belakang bagian dari desain Anda dapat menciptakan beberapa efek menarik.

Apakah Ini Sesuatu Yang Mungkin Dipecahkan oleh Spesifikasi Di Masa Depan?

Menambahkan latar belakang dan batas memang terasa seperti fitur yang hilang dari spesifikasi Grid CSS dan yang telah didiskusikan oleh Kelompok Kerja bersama dengan banyak anggota komunitas (utas diskusi ada di GitHub).

Jika Anda memiliki kasus penggunaan yang tidak mudah diselesaikan dengan konten yang dihasilkan, tambahkan pemikiran Anda ke utas itu. Komentar dan kasus penggunaan Anda membantu menunjukkan minat pengembang pada fitur tersebut dan juga memastikan bahwa setiap proposal mencakup hal-hal yang perlu Anda lakukan.

Lebih Banyak Contoh, Tolong!

Jika artikel ini mendorong Anda untuk bereksperimen dengan konten yang dibuat atau, jika Anda sudah memiliki contoh, tambahkan ke komentar. Semua orang baru menggunakan Grid dalam produksi, jadi ada banyak, “ Saya tidak pernah memikirkan itu! ” momen yang bisa didapat, saat kami menggabungkan Grid dengan metode tata letak lainnya.