Postingan ini menyoroti beberapa baris CSS canggih yang melakukan beberapa tugas berat dan membantu Anda membangun tata letak modern yang andal.
Tata letak CSS modern memungkinkan developer menulis aturan penataan gaya yang benar-benar bermakna dan kuat hanya dengan beberapa penekanan tombol. Pembicaraan di atas dan postingan selanjutnya ini membahas 10 baris CSS canggih yang melakukan beberapa tugas berat yang serius.
Untuk mengikuti atau bermain demo ini sendiri, lihat sematan Glitch di atas, atau kunjungi 1linelayouts.glitch.me.
01. Sangat Berfokus pada: place-items: center
Untuk tata letak 'baris tunggal' pertama, mari kita pecahkan misteri terbesar dalam semua bidang CSS: posisi tengah. Saya ingin Anda tahu bahwa ini lebih mudah daripada yang Anda pikirkan dengan place-items: center.
Pertama-tama, tentukan grid sebagai metode display, lalu tulis place-items: center pada elemen yang sama. place-items adalah singkatan untuk menetapkan align-items dan justify-items sekaligus. Dengan menyetelnya ke center, align-items dan justify-items akan disetel ke center.
.parent {
display: grid;
place-items: center;
}
Hal ini memungkinkan konten dipusatkan secara sempurna dalam induk, terlepas dari ukuran intrinsiknya.
02. Pancake yang Didekonstruksi: flex: <grow> <shrink> <baseWidth>
Selanjutnya kita punya panekuk yang sudah dibongkar! Ini adalah tata letak umum untuk situs pemasaran, misalnya, yang mungkin memiliki barisan 3 item, biasanya dengan gambar, judul, lalu beberapa teks, yang menjelaskan beberapa fitur produk. Di perangkat seluler, kita ingin tampilan tersebut menumpuk dengan baik, dan memperluasnya seiring kita memperbesar ukuran layar.
Dengan menggunakan Flexbox untuk efek ini, Anda tidak memerlukan kueri media untuk menyesuaikan penempatan elemen-elemen ini saat layar diubah ukurannya.
Singkatan flex adalah singkatan dari: flex: <flex-grow> <flex-shrink> <flex-basis>.
Karena itu, jika Anda ingin kotak Anda diisi hingga ukuran <flex-basis>, mengecilkan ukuran yang lebih kecil, tetapi tidak membentangkan untuk mengisi ruang tambahan, tulis: flex: 0 1 <flex-basis>. Dalam hal ini, <flex-basis> Anda adalah 150px sehingga terlihat seperti:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Jika Anda memang ingin kotak direntangkan dan mengisi ruang saat digabungkan ke baris berikutnya, setel <flex-grow> ke 1, sehingga akan terlihat seperti ini:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Sekarang, saat kamu memperbesar atau memperkecil ukuran layar, item fleksibel ini akan menyusut dan membesar.
03. Sidebar Menyatakan: grid-template-columns: minmax(<min>, <max>) …)
Demo ini memanfaatkan fungsi minmax untuk tata letak petak. Yang kita lakukan di sini adalah menyetel ukuran sidebar minimum menjadi 150px, tetapi di layar yang lebih besar, memungkinkan rentang tersebut direntangkan ke 25%. Sidebar akan selalu menempati 25% dari ruang horizontal induknya hingga 25% tersebut menjadi lebih kecil dari 150px.
Tambahkan ini sebagai nilai kolom grid-template-column dengan nilai berikut:
minmax(150px, 25%) 1fr. Item di kolom pertama (dalam hal ini sidebar) mendapatkan minmax sebesar 150px di 25%, dan item kedua (bagian main di sini) menggunakan sisa ruang sebagai satu trek 1fr.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Tumpukan Panekuk: grid-template-rows: auto 1fr auto
Tidak seperti Pancake yang Didekonstruksi, contoh ini tidak menggabungkan turunannya saat ukuran layar berubah. Umumnya disebut sebagai footer melekat, tata letak ini sering digunakan untuk situs dan aplikasi, di berbagai aplikasi seluler (footer biasanya adalah toolbar), dan situs (aplikasi web satu halaman sering menggunakan tata letak global ini).
Menambahkan display: grid ke komponen akan memberi Anda petak kolom tunggal, tetapi area utama hanya akan setinggi konten dengan footer di bawahnya.
Agar footer melekat di bagian bawah, tambahkan:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Tindakan ini menyetel konten header dan footer untuk otomatis mengambil ukuran turunannya, dan menerapkan ruang yang tersisa (1fr) ke area utama, sedangkan baris berukuran auto akan mengambil ukuran konten minimum turunannya, sehingga jika konten tersebut bertambah besar, baris itu sendiri akan membesar agar sesuai.
05. Tata Letak Cawan Suci Klasik: grid-template: auto 1fr auto / auto 1fr auto
Untuk tata letak Holy grail klasik ini, ada header, footer, sidebar kiri, sidebar kanan, dan konten utama. Tata letak ini mirip dengan tata letak sebelumnya, tetapi sekarang dengan bilah sisi!
Untuk menulis seluruh petak ini menggunakan satu baris kode, gunakan properti grid-template. Ini memungkinkan Anda untuk menetapkan baris dan kolom secara bersamaan.
Pasangan properti dan nilai adalah: grid-template: auto 1fr auto / auto 1fr auto. Garis miring di antara daftar yang dipisahkan spasi pertama dan kedua adalah batas antara baris dan kolom.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Seperti dalam contoh terakhir, di mana {i>header<i} dan {i>footer<i} memiliki konten berukuran otomatis, di sini {i>sidebar<i} kiri dan kanan secara otomatis diubah ukurannya berdasarkan ukuran intrinsik anak-anaknya. Namun, kali ini ukuran horizontalnya (lebar), bukan vertikal (tinggi).
06. Petak 12 Rentang: grid-template-columns: repeat(12, 1fr)
Selanjutnya kita memiliki konsep klasik lainnya: petak 12 rentang. Anda dapat dengan cepat menulis petak di CSS menggunakan fungsi repeat(). Menggunakan: repeat(12, 1fr); untuk kolom template petak memberi Anda 12 kolom masing-masing 1fr.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Sekarang Anda memiliki kisi-kisi pelacakan kolom 12 kolom, kita dapat menempatkan anak-anak kita di kisi-kisi tersebut. Salah satu cara untuk melakukan ini adalah dengan menempatkannya menggunakan garis kisi. Misalnya, grid-column: 1 / 13 akan mencakup semua baris dari baris pertama hingga baris terakhir (ke-13) dan mencakup 12 kolom. grid-column: 1 / 5; akan mencakup empat minggu pertama.
Cara lain untuk menulisnya adalah dengan menggunakan kata kunci span. Dengan span, Anda menetapkan garis awal dan berapa banyak kolom yang akan dibentangkan dari titik awal tersebut. Dalam hal ini, grid-column: 1 / span 12 akan setara dengan grid-column: 1 / 13, dan grid-column: 2 / span 6 akan setara dengan grid-column: 2 / 8.
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM (Ulangi, Otomatis, MinMax): grid-template-columns(auto-fit, minmax(<base>, 1fr))
Untuk contoh ketujuh ini, gabungkan beberapa konsep yang telah Anda pelajari untuk membuat tata letak responsif dengan turunan yang ditempatkan otomatis dan fleksibel. Cukup rapi. Istilah penting yang perlu diingat di sini adalah repeat, auto-(fit|fill), dan minmax()', yang Anda ingat dengan RAM akronim.
Secara keseluruhan, terlihat seperti:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Anda menggunakan pengulangan lagi, tetapi kali ini, menggunakan kata kunci auto-fit dan bukan nilai numerik eksplisit. Tindakan ini memungkinkan penempatan otomatis elemen turunan ini. Turunan ini juga memiliki nilai minimum dasar 150px dengan nilai maksimum 1fr, yang berarti pada layar yang lebih kecil, turunan akan menggunakan lebar 1fr penuh, dan saat masing-masing mencapai lebar 150px, turunan tersebut akan mulai mengalir ke garis yang sama.
Dengan auto-fit, kotak akan direntangkan karena ukuran horizontalnya melebihi 150 piksel untuk mengisi seluruh ruang yang tersisa. Namun, jika Anda mengubahnya menjadi auto-fill, fungsi ini tidak akan melebar saat ukuran dasarnya dalam fungsi minmax terlampaui:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Daftar: justify-content: space-between
Untuk tata letak berikutnya, poin utama yang akan ditunjukkan di sini adalah justify-content: space-between, yang menempatkan elemen turunan pertama dan terakhir di tepi kotak pembatasnya, dengan ruang yang tersisa didistribusikan secara merata di antara elemen. Untuk kartu ini, kartu ditempatkan dalam mode tampilan Flexbox, dengan arah ditetapkan ke kolom menggunakan flex-direction: column.
Tindakan ini menempatkan judul, deskripsi, dan blok gambar pada kolom vertikal di dalam kartu induk. Kemudian, penerapan justify-content: space-between akan menambatkan elemen pertama (judul) dan terakhir (blok gambar) ke tepi flexbox, dan teks deskriptif di antara elemen-elemen tersebut ditempatkan dengan spasi yang sama dengan setiap endpoint.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Menerapkan Gaya Saya: clamp(<min>, <actual>, <max>)
Di sinilah kita membahas beberapa teknik dengan lebih sedikit dukungan browser, tetapi memiliki beberapa implikasi yang sangat menarik untuk tata letak dan desain UI yang responsif. Dalam demo ini, Anda menyetel lebar menggunakan klem seperti berikut: width: clamp(<min>, <actual>, <max>).
Perintah ini akan menetapkan ukuran minimum dan maksimum, serta ukuran sebenarnya. Dengan nilai, hal tersebut dapat terlihat seperti:
.parent {
width: clamp(23ch, 60%, 46ch);
}
Ukuran minimum di sini adalah 23ch atau unit 23 karakter, dan ukuran maksimum adalah 46ch, 46 karakter. Unit lebar karakter didasarkan pada ukuran font elemen (khususnya lebar glyph 0). Ukuran 'sebenarnya' adalah 50%, yang mewakili 50% lebar induk elemen ini.
Yang dilakukan fungsi clamp() di sini adalah mengaktifkan elemen ini untuk mempertahankan lebar 50% hingga 50% lebih besar dari 46ch (pada area pandang yang lebih luas), atau lebih kecil dari 23ch (pada area pandang yang lebih kecil). Anda dapat melihat bahwa saat saya meregangkan dan mengecilkan ukuran induk, lebar kartu ini meningkat ke titik maksimum yang dijepit dan mengecil ke batas minimum yang dijepit. Kemudian tetap berada di tengah induk karena kita telah menerapkan properti tambahan untuk memusatkannya. Hal ini memungkinkan tata letak yang lebih mudah dibaca, karena teks tidak akan terlalu lebar (di atas 46ch) atau terlalu dipadatkan dan sempit (kurang dari 23ch).
Ini juga merupakan cara yang bagus untuk menerapkan tipografi responsif. Misalnya, Anda dapat menulis: font-size: clamp(1.5rem, 20vw, 3rem). Dalam hal ini, ukuran font judul akan selalu dibatasi antara 1.5rem dan 3rem, tetapi akan bertambah dan menyusut berdasarkan nilai sebenarnya 20vw agar sesuai dengan lebar area pandang.
Ini adalah teknik yang hebat untuk memastikan keterbacaan dengan nilai ukuran minimum dan maksimum, tetapi ingat bahwa ini tidak didukung di semua browser modern, jadi pastikan Anda memiliki penggantian dan lakukan pengujian.
10. Perspektif terhadap Aspek: aspect-ratio: <width> / <height>
Dan akhirnya, {i>tool<i} {i>layout<i} terakhir ini adalah yang paling eksperimental dari kelompok itu. Fitur ini baru-baru ini diperkenalkan ke Chrome Canary di Chromium 84, dan sudah ada upaya aktif dari Firefox untuk menerapkannya, tetapi saat ini fitur ini belum tersedia dalam edisi browser stabil.
Namun, saya ingin menyampaikannya karena ini adalah masalah yang sering dihadapi. Cara ini hanya untuk mempertahankan rasio aspek gambar.
Dengan properti aspect-ratio, saat saya mengubah ukuran kartu, blok visual hijau mempertahankan rasio aspek 16 x 9 ini. Kami Mematuhi Rasio Aspek dengan aspect-ratio: 16 / 9.
.video {
aspect-ratio: 16 / 9;
}
Untuk mempertahankan rasio aspek 16 x 9 tanpa properti ini, Anda harus menggunakan hack padding-top dan memberinya padding 56.25% untuk menyetel rasio lebar tinggi. Kami akan segera memiliki properti untuk menghindari peretasan dan kebutuhan untuk menghitung persentasenya. Anda dapat membuat persegi dengan rasio 1 / 1, rasio 2:1 dengan 2 / 1, dan apa pun yang diperlukan agar gambar ini diskalakan dengan rasio ukuran yang ditetapkan.
.square {
aspect-ratio: 1 / 1;
}
Meskipun fitur ini masih akan hadir, fitur ini bagus untuk diketahui karena dapat mengatasi banyak masalah developer yang sering saya hadapi, terutama dalam hal video dan iframe.
Kesimpulan
Terima kasih telah mengikuti 10 lini CSS canggih ini. Untuk mempelajari lebih lanjut, tonton video lengkapnya, dan coba demonya sendiri.