Postingan ini menyoroti beberapa barisan CSS canggih yang melakukan tugas berat yang serius dan membantu Anda membangun tata letak modern yang kuat.
Tata letak CSS modern memungkinkan developer untuk menulis aturan gaya visual yang sangat bermakna dan kuat hanya dengan beberapa tombol. Pembicaraan di atas dan postingan berikutnya membahas 10 lini CSS canggih yang melakukan pekerjaan berat yang serius.
Untuk mengikuti atau bermain demo ini sendiri, lihat sematan Glitch di atas, atau buka 1linelayouts.glitch.me.
01. Super Terpusat: place-items: center
Untuk tata letak 'baris tunggal' pertama, mari kita pecahkan misteri terbesar di semua dunia CSS: memusatkan berbagai hal. Saya ingin Anda tahu bahwa lebih mudah dari yang Anda kira dengan place-items: center.
Pertama-tama, tentukan grid sebagai metode display, lalu tulis place-items: center pada elemen yang sama. place-items adalah cara pintas untuk menetapkan align-items dan justify-items sekaligus. Dengan menyetelnya ke center, align-items dan justify-items disetel ke center.
.parent {
display: grid;
place-items: center;
}
Hal ini memungkinkan konten terpusat secara sempurna di dalam induk, terlepas dari ukuran intrinsik.
02. Pancake yang Didekonstruksi: flex: <grow> <shrink> <baseWidth>
Selanjutnya, kita punya panekuk yang sudah didekonstruksi! Tata letak ini adalah tata letak umum untuk situs pemasaran, misalnya, yang mungkin memiliki baris berisi 3 item, biasanya dengan gambar, judul, lalu beberapa teks, yang menjelaskan beberapa fitur produk. Di seluler, kita ingin semuanya menumpuk dengan baik, dan meluas saat kita meningkatkan ukuran layar.
Dengan menggunakan Flexbox untuk efek ini, Anda tidak memerlukan kueri media untuk menyesuaikan penempatan elemen ini saat ukuran layar berubah.
Singkatan flex adalah singkatan dari: flex: <flex-grow> <flex-shrink> <flex-basis>.
Oleh karena itu, jika Anda ingin kotak mengisi ukuran <flex-basis>, perkecil menjadi ukuran yang lebih kecil, tetapi tidak meregangkan 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 ingin kotak-kotak meregang 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 Anda memperbesar atau memperkecil ukuran layar, item-item fleksibel ini akan mengecil dan membesar.
03. Sidebar Mengatakan: grid-template-columns: minmax(<min>, <max>) …)
Demo ini memanfaatkan fungsi minmax untuk tata letak petak. Yang kita lakukan di sini adalah menetapkan ukuran sidebar minimum menjadi 150px, tetapi di layar yang lebih besar, membiarkannya membentang hingga 25%. Sidebar akan selalu mengambil 25% dari ruang horizontal induknya sampai 25% tersebut menjadi lebih kecil dari 150px.
Tambahkan nilai ini sebagai nilai kolom-kolom-template dengan nilai berikut:
minmax(150px, 25%) 1fr. Item di kolom pertama (dalam hal ini sidebar) mendapatkan minmax 150px pada 25%, dan item kedua (bagian main di sini) menggunakan sisa ruang sebagai trek 1fr tunggal.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Tumpukan Panekuk: grid-template-rows: auto 1fr auto
Tidak seperti Dekonstruksi Pancake, contoh ini tidak menggabungkan turunannya saat ukuran layar berubah. Secara umum disebut sebagai footer melekat, tata letak ini sering digunakan untuk situs dan aplikasi, di seluruh aplikasi seluler (footer biasanya berupa toolbar), dan situs (aplikasi web satu halaman sering menggunakan tata letak global ini).
Menambahkan display: grid ke komponen akan memberi Anda satu petak kolom, tetapi area utama hanya akan setinggi konten dengan footer di bawahnya.
Agar {i>footer<i} menempel di bagian bawah, tambahkan:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Tindakan ini akan menyetel konten header dan footer agar otomatis menggunakan ukuran turunannya, dan menerapkan ruang yang tersisa (1fr) ke area utama, sedangkan baris berukuran auto akan menggunakan ukuran konten minimum turunannya, sehingga konten tersebut bertambah besar, dan baris itu sendiri akan membesar untuk menyesuaikan.
05. Tata Letak Holy Grail Klasik: grid-template: auto 1fr auto / auto 1fr auto
Untuk tata letak "holy grail" klasik ini, terdapat header, footer, sidebar kiri, sidebar kanan, dan konten utama. Tata letak ini mirip dengan tata letak sebelumnya, tetapi kini dengan sidebar.
Untuk menulis seluruh petak ini menggunakan satu baris kode, gunakan properti grid-template. Cara ini memungkinkan Anda untuk mengatur 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 jeda antara baris dan kolom.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Seperti pada contoh terakhir, dengan header dan footer memiliki konten yang berukuran otomatis, di sini sidebar kiri dan kanan otomatis diubah ukurannya berdasarkan ukuran intrinsik turunannya. Namun, kali ini adalah ukuran horizontal (lebar), bukan vertikal (tinggi).
06 Petak 12 Rentang: grid-template-columns: repeat(12, 1fr)
Selanjutnya kita memiliki klasik
lain: kisi 12-span. Anda dapat dengan cepat menulis petak di CSS dengan fungsi repeat(). Menggunakan: repeat(12, 1fr); untuk kolom template petak akan memberi Anda 12 kolom masing-masing dengan 1fr.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Sekarang Anda memiliki kisi {i>track<i} 12 kolom, kita dapat menempatkan anak-anak kita di {i>grid<i}. Salah satu cara untuk melakukan ini adalah dengan menempatkannya menggunakan garis kisi. Misalnya, grid-column: 1 / 13 akan membentang dari baris pertama hingga baris terakhir (ke-13) dan mencakup 12 kolom. grid-column: 1 / 5; akan mencakup empat elemen pertama.
Cara lain untuk menulis ini adalah dengan menggunakan kata kunci span. Dengan span, Anda menetapkan garis awal dan jumlah kolom yang harus direntangkan 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 fleksibel dan ditempatkan secara otomatis. Cukup rapi. Istilah kunci yang harus diingat di sini adalah repeat, auto-(fit|fill), dan minmax()', yang Anda ingat singkatan RAM.
Jika digabungkan, tampilannya akan 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, bukan nilai numerik eksplisit. Tindakan ini memungkinkan penempatan otomatis elemen turunan ini. Turunan ini juga memiliki nilai minimum dasar 150px dengan nilai maksimum 1fr. Artinya, pada layar yang lebih kecil, turunan ini akan menggunakan lebar 1fr penuh, dan saat mencapai lebar 150px, turunan ini akan mulai mengalir ke baris 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, parameter ini tidak akan direntangkan ketika ukuran dasarnya dalam fungsi minmax terlampaui:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08 Baris di Atas: justify-content: space-between
Untuk tata letak berikutnya, poin utama yang harus 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.
Ini menempatkan judul, deskripsi, dan blok gambar pada kolom vertikal di dalam kartu induk. Kemudian, menerapkan justify-content: space-between akan menambatkan elemen pertama (judul) dan terakhir (blok gambar) ke tepi flexbox, dan teks deskriptif di antara keduanya ditempatkan dengan spasi yang sama ke setiap endpoint.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09 Membatasi Gaya Saya: clamp(<min>, <actual>, <max>)
Di sinilah kita membahas beberapa teknik dengan dukungan browser yang lebih sedikit, 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>).
Ini menetapkan ukuran min dan maks absolut, serta ukuran sebenarnya. Dengan nilai, yang dapat terlihat seperti:
.parent {
width: clamp(23ch, 60%, 46ch);
}
Ukuran minimum di sini adalah 23ch atau 23 unit 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 memungkinkan elemen ini mempertahankan lebar 50% hingga 50% lebih besar dari 46ch (di area tampilan yang lebih lebar), atau lebih kecil dari 23ch (di 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 menurun ke batas minimumnya. Itu kemudian tetap di tengah di 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).
Cara ini juga 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 membesar dan menyusut berdasarkan nilai sebenarnya 20vw agar sesuai dengan lebar area pandang.
Ini adalah teknik yang baik untuk memastikan keterbacaan dengan nilai ukuran minimum dan maksimum, tetapi perlu diingat bahwa hal ini tidak didukung di semua browser modern, jadi pastikan Anda memiliki pengganti dan lakukan pengujian.
10. Penghormatan terhadap Aspek: aspect-ratio: <width> / <height>
Dan akhirnya, alat tata letak terakhir ini yang paling eksperimental dari yang lain. Fitur ini baru saja diperkenalkan ke Chrome Canary di Chromium 84, dan ada upaya aktif dari Firefox untuk mengimplementasikannya, tetapi saat ini tidak tersedia di edisi browser stabil mana pun.
Namun, saya ingin menyebutkan hal ini, karena ini adalah masalah yang sering terjadi. Cara ini hanya mempertahankan rasio aspek gambar.
Dengan properti aspect-ratio, saat saya mengubah ukuran kartu, blok visual hijau mempertahankan rasio aspek 16x9 ini. Kami Menghormati Rasio Aspek dengan aspect-ratio: 16 / 9.
.video {
aspect-ratio: 16 / 9;
}
Untuk mempertahankan rasio aspek 16x9 tanpa properti ini, Anda harus menggunakan tips padding-top dan memberinya padding 56.25% untuk menetapkan rasio lebar tinggi. Kami akan segera memiliki properti untuk menghindari peretasan ini dan kebutuhan untuk menghitung persentasenya. Anda dapat membuat persegi dengan rasio 1 / 1, rasio 2 banding 1 dengan 2 / 1, dan apa saja yang Anda perlukan untuk menskalakan gambar ini dengan rasio ukuran yang ditetapkan.
.square {
aspect-ratio: 1 / 1;
}
Meskipun fitur ini masih akan hadir, fitur ini bagus untuk diketahui karena mampu menyelesaikan banyak perselisihan developer yang telah saya hadapi berkali-kali, terutama terkait video dan iframe.
Kesimpulan
Terima kasih telah mengikuti perjalanan ini melalui 10 lini CSS yang canggih. Untuk mempelajari lebih lanjut, tonton video lengkap, dan coba sendiri demonya.