Memposisikan Konten Overlay dengan CSS Grid

Bukan berita baru bagi pengembang web mana pun pada tahun 2021: CSS G rid adalah alat yang sangat kuat untuk membuat tata letak web modern dua dimensi yang kompleks dan berbeda.

Baru-baru ini, saya telah bereksperimen dengan CSS Grid dan properti penyelarasan untuk membuat tata letak komponen yang berisi beberapa elemen yang tumpang tindih. Tata letak ini dapat ditata menggunakan pemosisian absolut dan campuran nilai offset ( top , right , bottom , left ), margin negatif, dan transformasi. Namun, dengan CSS Grid, pemosisian elemen overlay dapat dibangun menggunakan properti dan nilai yang lebih logis dan mudah dibaca. Berikut ini adalah beberapa contoh di mana properti grid ini berguna.

Ini akan membantu untuk membaca tentang grid-template-areas grid dan grid-area jika Anda belum terbiasa dengannya.

Memperluas gambar di dalam dimensi terbatas

Dalam demo, ada kotak centang yang mengaktifkan visibilitas luapan sehingga kita dapat melihat di mana dimensi gambar meluas melampaui penampung pada lebar viewport yang lebih besar.

Berikut adalah bagian pahlawan umum dengan judul yang tumpang tindih dengan gambar. Meskipun gambar dibatasi dengan max-width , gambar tersebut ditingkatkan menjadi cukup tinggi di desktop. Karena itu, tim strategi konten telah meminta agar beberapa konten halaman terkait di bawah pahlawan tetap terlihat di viewport sebanyak mungkin. Menggabungkan teknik tata letak ini dan max-height wadah cairan menggunakan fungsi clamp() , kita dapat mengembangkan sesuatu yang menyesuaikan berdasarkan ruang viewport yang tersedia sambil menambatkan gambar pahlawan ke tengah wadah.

CSS clamp() , bersama dengan min() dan max() , didukung dengan baik di semua browser modern. Belum menggunakannya? Ahmad Shadeed melakukan penyelaman dalam yang fantastis dalam artikel ini .

Buka Pena ini dan ubah ukuran lebar viewport. Berdasarkan dimensi gambar, tinggi wadah mengembang hingga mencapai ketinggian maksimum. Perhatikan bahwa gambar terus tumbuh sambil tetap berada di tengah wadah. Ubah ukuran ketinggian viewport dan container akan melenturkan antara nilai batas bawah dan batas atas max-height clamp() .

Sebelum menggunakan kisi untuk gaya tata letak, saya mungkin telah mencoba pemosisian absolut pada gambar dan judul, menggunakan trik padding rasio aspek untuk membuat ketinggian responsif, dan object-fit untuk mempertahankan rasio gambar. Sesuatu seperti ini bisa mendapatkannya di sana:

 .container { position: relative; max-height: clamp(400px, 50vh, 600px); } .container::before { content: ''; display: block; padding-top: 52.25%; } .container > * { max-width: 1000px; } .container .image { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; object-fit: cover; } .container .title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; }

Mungkin ada kemungkinan untuk mengurangi kode lagi, tetapi masih ada banyak gaya yang dibutuhkan. Mengelola tata letak responsif yang sama dengan CSS Grid akan menyederhanakan aturan gaya tata letak ini sekaligus membuat kode lebih mudah dibaca. Simak dalam iterasi berikut:

 .container { display: grid; grid-template: "container"; place-items: center; place-content: center; overflow: hidden; max-height: clamp(450px, 50vh, 600px); } .container > * { grid-area: container; max-width: 1000px; }

place-content: center menginstruksikan gambar untuk terus tumbuh dari tengah wadah. Hapus baris ini dan lihat bahwa, saat gambar masih dipusatkan secara vertikal melalui place-items , setelah max-height tercapai, gambar akan menempel di bagian atas blok wadah dan terus menskala di luar bagian bawahnya. Atur place-content: end center dan Anda akan melihat gambar tumpah di atas wadah.

Perilaku ini mungkin tampak secara konseptual mirip dengan menerapkan object-fit: cover pada gambar sebagai metode penataan untuk mempertahankan rasio intrinsiknya sambil mengubah ukuran untuk mengisi dimensi kotak kontennya (itu digunakan dalam iterasi posisi absolut). Namun, dalam konteks kisi ini, elemen gambar mengatur ketinggian induknya dan, setelah max-height induk tercapai, gambar terus berkembang, mempertahankan rasionya, dan tetap terlihat sepenuhnya jika luapan induk ditampilkan. object-fit bahkan dapat digunakan dengan aspect-ratio sini untuk membuat pola rasio aspek yang konsisten untuk gambar pahlawan:

 .container .image { width: 100%; height: auto; object-fit: cover; aspect-ratio: 16 / 9; }

Area grid-area

Pindah ke anak-anak langsung wadah, grid-area mengatur masing-masing sehingga mereka tumpang tindih dengan ruang yang sama. Dalam contoh ini, grid-template-areas grid dengan area grid bernama membuat kode sedikit lebih mudah dibaca dan berfungsi dengan baik sebagai pola untuk layout gaya overlay lainnya dalam pustaka komponen. Karena itu, dimungkinkan untuk mendapatkan hasil yang sama dengan menghapus aturan templat dan, alih-alih grid-area: container , menggunakan bilangan bulat:

 .container > * { grid-area: 1 / 1; }

Ini adalah singkatan dari grid-row-start , grid-column-start , grid-row-end , dan grid-column-end . Karena saudara dalam demo ini semuanya berbagi area baris/kolom tunggal yang sama, hanya garis awal yang perlu disetel untuk hasil yang diinginkan.

Mengatur place-self untuk menempatkan dirinya sendiri

Pola overlay umum lainnya dapat dilihat pada carousel gambar. Elemen interaktif sering ditempatkan di atas area pandang carousel. Saya telah memperluas demo pertama dan mengganti gambar pahlawan statis dengan korsel.

Cerita yang sama seperti sebelumnya: Tata letak ini dapat kembali ke posisi absolut dan menggunakan nilai integer di beberapa properti untuk mendorong dan menarik elemen di sekitar wadah induknya. Sebagai gantinya, kami akan menggunakan kembali aturan tata letak kisi dari demo sebelumnya. Setelah diterapkan, itu muncul seperti yang Anda harapkan: semua elemen anak dipusatkan di dalam wadah, tumpang tindih satu sama lain.

Gambar anak anjing coklat muda yang lucu dengan tulisan Welcome to the Snuggle Zone di atasnya dengan warna putih. Teks tumpang tindih di atas elemen teks dan sulit dibaca.
Dengan place-items: center dideklarasikan pada container, semua turunan langsungnya akan saling tumpang tindih.

Langkah selanjutnya adalah mengatur nilai keselarasan pada elemen individu. Properti place-self —singkatan untuk align-self dan justify-self kontrol granular atas posisi satu item di dalam wadah. Berikut adalah gaya tata letak secara keseluruhan:

 .container { display: grid; grid-template:"container"; place-items: center; place-content: center; overflow: hidden; max-height: clamp(450px, 50vh, 600px); } .container > * { grid-area: container; max-width: 1000px; } .title { place-self: start center; } .carousel-control.prev { place-self: center left; } .carousel-control.next { place-self: center right; } .carousel-dots { place-self: end center; }

Hanya ada satu masalah kecil: Judul dan indikator titik korsel ditarik ke luapan saat gambar melebihi dimensi wadah.

Untuk memuat elemen-elemen ini dengan benar di dalam induk, grid-template-row harus 100% dari wadah, ditetapkan di sini sebagai satu unit pecahan.

 .container { grid-template-areas: "container"; grid-template-rows: 1fr; }

Untuk demo ini, saya menggunakan grid-template (yang akan kita lihat lagi nanti di artikel ini).

 .container { grid-template: "container" 1fr; }

Setelah memberikan sedikit pembaruan itu, elemen overlay tetap berada di dalam wadah induk, bahkan ketika gambar carousel menyebar di luar batas carousel.

Alignment dan bernama grid-template-areas

Mari kita gunakan metode tata letak overlay sebelumnya untuk satu contoh lagi. Dalam demo ini, setiap kotak berisi elemen yang diposisikan di area berbeda di atas gambar.

Untuk iterasi pertama, area templat bernama dideklarasikan untuk melapisi anak-anak pada ruang elemen induk, mirip dengan demo sebelumnya:

 .box { display: grid; grid-template-areas: "box"; } .box > *, .box::before { grid-area: box; }

Gambar dan overlay semi-transparan sekarang menutupi area kotak, tetapi aturan gaya ini juga meregangkan item lain di seluruh ruang. Sepertinya ini waktu yang tepat bagi place-self untuk membumbui elemen-elemen ini dengan sihir penyelarasan!

 .tag { place-self: start; } .title { place-self: center; } .tagline { place-self: end start; } .actions { place-self: end; }

Itu terlihat bagus! Setiap elemen diposisikan di tempat yang ditentukan di atas gambar sebagaimana dimaksud. Hampir saja. Ada sedikit nuansa di area bawah tempat tagline dan tombol aksi berada. Arahkan kursor ke gambar untuk membuka tagline. Ini mungkin terlihat baik-baik saja dengan string teks pendek di layar desktop, tetapi jika tagline menjadi lebih panjang (atau kotak di area pandang lebih kecil), pada akhirnya akan meluas di belakang tombol tindakan.

Kotak gambar dua kali dua dengan teks dilapis di atas, serta label tag di sudut kanan atas dan, tagline di sudut kiri bawah dan tindakan untuk menyukai dan berbagi di sudut kanan bawah masing-masing.
Perhatikan bagaimana tagline di kotak pertama di baris kedua tumpang tindih dengan tombol tindakan.

Untuk membersihkannya, area grid-template-areas menggunakan area bernama untuk tagline dan tindakan. Aturan grid-template-columns diperkenalkan sehingga penampung tindakan hanya menskala untuk mengakomodasi ukuran tombolnya sementara tagline mengisi sisa area inline menggunakan nilai 1fr .

 .box { display: grid; grid-template-areas: "tagline actions"; grid-template-columns: 1fr auto; }

Ini juga dapat dikombinasikan dengan singkatan grid-template Nilai kolom ditentukan setelah garis miring, seperti:

 .box { grid-template: "tagline actions" / 1fr auto; }

Area grid-area kemudian dikonversi menjadi bilangan bulat sekarang setelah kata kunci "kotak" telah dihapus.

 .box > *, .box::before { grid-area: 1 / 1 / -1 / -1; }

Semuanya harus terlihat seperti sebelumnya. Sekarang untuk sentuhan akhir. Kata tagline dan actions ditetapkan sebagai nilai grid-area elemen masing-masing:

 .tagline { grid-area: tagline; place-self: end start; } .actions { grid-area: actions; place-self: end; }

Sekarang, saat mengarahkan kursor ke kartu dalam demo, tagline akan terbungkus menjadi beberapa baris saat teks menjadi terlalu panjang, daripada menekan tombol tindakan seperti sebelumnya.

Garis kisi bernama

Melihat kembali pada iterasi pertama dari kode ini, saya sangat suka jika area grid-area default disetel ke kata kunci box Ada cara untuk mendapatkannya kembali.

Saya akan menambahkan beberapa baris grid bernama ke template. Dalam grid-template bawah, baris pertama mendefinisikan area templat bernama, yang juga mewakili baris. Setelah garis miring adalah ukuran kolom eksplisit (dipindahkan ke baris baru agar mudah dibaca). Pengidentifikasi kustom [box-start] dan [box-end] mewakili area box

 .box { display: grid; grid-template: [box-start] "tagline actions" [box-end] / [box-start] 1fr auto [box-end]; } .box > *, .box::before { grid-area: box; }

Melewati nama dengan -start dan -end sintaks dalam kurung mendefinisikan area untuk nama itu. Nama ini, yang dikenal sebagai custom ident , dapat berupa apa saja kecuali kata-kata dari spesifikasi CSS yang harus dihindari .

Nilai penempatan logis

Salah satu bagian yang sangat menarik untuk diamati dalam contoh terakhir ini adalah penggunaan nilai logika, seperti start dan end , untuk menempatkan elemen. Jika direction atau writing-mode berubah, maka elemen akan memposisikan ulang sesuai dengan itu.

Ketika arah "kanan ke kiri" dipilih dari dropdown, posisi awal dan akhir inline dibalik. Tata letak ini siap untuk mengakomodasi bahasa, seperti Arab atau Ibrani, yang dibaca dari kanan ke kiri tanpa harus mengesampingkan CSS yang ada.

Membungkus

Saya harap Anda menikmati demo ini dan mereka memberikan beberapa ide baru untuk tata letak proyek Anda sendiri—saya telah mengumpulkan kumpulan contoh yang dapat Anda lihat di CodePen. Jumlah daya yang dikemas ke dalam spesifikasi Grid CSS luar biasa. Luangkan waktu sebentar untuk merenungkan hari-hari penggunaan float dan perbaikan yang jelas untuk desain baris grid primitif, lalu kembali ke masa sekarang dan lihatlah tata letak dan properti tampilan yang indah dari CSS hari ini. Untuk membuat hal ini berjalan dengan baik bukanlah tugas yang mudah, jadi mari kita bertepuk tangan untuk anggota kelompok kerja CSS. Ruang web terus berkembang dan mereka terus menjadikannya tempat yang menyenangkan untuk dibangun.

Sekarang mari kita rilis kueri kontainer dan benar-benar memulai pesta ini.


Postingan Positioning Overlay Content with CSS Grid muncul pertama kali di CSS-Tricks . Anda dapat mendukung Trik-CSS dengan menjadi Pendukung MVP .

June 28, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *