Postingan ini menyoroti beberapa baris CSS yang efektif dan melakukan beberapa tugas berat serta membantu Anda membuat tata letak modern yang andal.
Tata letak CSS modern memungkinkan developer menulis aturan gaya yang sangat bermakna dan andal hanya dengan beberapa penekanan tombol. Presentasi di atas dan postingan berikutnya ini akan membahas 10 baris CSS yang canggih dan melakukan tugas berat.
Untuk mengikuti atau mencoba demo ini sendiri, lihat penyematan Glitch di atas, atau buka 1linelayouts.glitch.me.
01. Super Centered: place-items: center
Untuk tata letak 'satu baris' pertama, mari kita pecahkan misteri terbesar di seluruh dunia CSS: memusatkan elemen. Kami ingin Anda tahu bahwa hal ini lebih mudah dari yang Anda bayangkan dengan place-items: center
.
Pertama, 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 dengan sempurna dalam induk, terlepas dari ukuran intrinsiknya.
02. The Deconstructed Pancake: flex: <grow> <shrink> <baseWidth>
Selanjutnya, kita akan membuat pancake yang di-dekonstruksi. 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 perangkat seluler, kita ingin menu tersebut ditumpuk dengan baik, dan diperluas saat kita meningkatkan ukuran layar.
Dengan menggunakan Flexbox untuk efek ini, Anda tidak memerlukan kueri media untuk menyesuaikan penempatan elemen ini saat ukuran layar diubah.
Singkatan flex
adalah singkatan dari: flex: <flex-grow> <flex-shrink> <flex-basis>
.
Oleh karena itu, jika Anda ingin kotak diisi hingga ukuran <flex-basis>
, mengecil pada 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 meluas dan mengisi ruang saat digabungkan ke baris berikutnya, tetapkan <flex-grow>
ke 1
, sehingga akan terlihat seperti:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Sekarang, saat Anda menambah atau mengurangi ukuran layar, item fleksibel ini akan menyusut dan membesar.
03. Sidebar Menulis: 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 pada layar yang lebih besar, membiarkannya meluas hingga 25%
. Sidebar akan selalu menggunakan 25%
ruang horizontal induknya hingga 25%
tersebut menjadi lebih kecil dari 150px
.
Tambahkan ini sebagai nilai grid-template-columns dengan nilai berikut:
minmax(150px, 25%) 1fr
. Item di kolom pertama (sidebar dalam hal ini) mendapatkan minmax
dari 150px
di 25%
, dan item kedua (bagian main
di sini) menggunakan sisa ruang sebagai satu jalur 1fr
.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Pancake Stack: grid-template-rows: auto 1fr auto
Tidak seperti Deconstructed Pancake, contoh ini tidak menggabungkan turunannya saat ukuran layar berubah. Umumnya 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 petak satu kolom, tetapi area utama hanya akan setinggi konten dengan footer di bawahnya.
Agar footer tetap berada di bagian bawah, tambahkan:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Tindakan ini akan menetapkan 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 saat ukuran konten tersebut bertambah, baris itu sendiri akan bertambah 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 sekarang dengan sidebar.
Untuk menulis seluruh petak ini menggunakan satu baris kode, gunakan properti grid-template
. Hal ini memungkinkan Anda menetapkan baris dan kolom secara bersamaan.
Pasangan properti dan nilai adalah: grid-template: auto 1fr auto / auto 1fr auto
. Garis miring di antara daftar pertama dan kedua yang dipisahkan spasi adalah jeda antara baris dan kolom.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Seperti pada contoh terakhir, saat header dan footer memiliki konten dengan ukuran otomatis, di sini sidebar kiri dan kanan diukur secara otomatis berdasarkan ukuran intrinsik turunannya. Namun, kali ini ukurannya adalah horizontal (lebar), bukan vertikal (tinggi).
06. Petak 12-Span: grid-template-columns: repeat(12, 1fr)
Selanjutnya, kita memiliki gaya klasik lainnya: petak 12 span. Anda dapat menulis petak di CSS dengan cepat menggunakan fungsi repeat()
. Menggunakan: repeat(12, 1fr);
untuk kolom template petak akan 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 petak jalur 12 kolom, kita dapat menempatkan turunan di petak. Salah satu cara untuk melakukannya adalah dengan menempatkannya menggunakan garis petak. 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 yang pertama.
Cara lain untuk menulisnya adalah dengan menggunakan kata kunci span
. Dengan span
, Anda menetapkan baris awal, lalu jumlah kolom yang akan diperluas 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 secara otomatis dan fleksibel. Cukup rapi. Istilah utama yang perlu diingat di sini adalah repeat
, auto-(fit|fill)
, dan minmax()'
, yang Anda ingat dengan akronim RAM.
Jika digabungkan, tampilannya akan terlihat seperti:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Anda menggunakan repeat lagi, tetapi kali ini, menggunakan kata kunci auto-fit
, bukan nilai numerik eksplisit. Hal 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 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 meluas karena ukuran horizontalnya melebihi 150 piksel untuk mengisi seluruh ruang yang tersisa. Namun, jika Anda mengubahnya menjadi auto-fill
, ukurannya tidak akan meluas saat ukuran dasarnya dalam fungsi minmax terlampaui:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Baris: 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 yang ditetapkan ke kolom menggunakan flex-direction: column
.
Tindakan ini akan menempatkan blok judul, deskripsi, dan gambar dalam kolom vertikal di dalam kartu induk. Kemudian, menerapkan justify-content: space-between
akan mengaitkan elemen pertama (judul) dan terakhir (blok gambar) ke tepi flexbox, dan teks deskriptif di antaranya akan ditempatkan dengan spasi yang sama ke setiap endpoint.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Menggeser Gaya Saya: clamp(<min>, <actual>, <max>)
Di sinilah kita akan membahas beberapa teknik dengan dukungan browser yang lebih sedikit, tetapi memiliki beberapa implikasi yang sangat menarik untuk tata letak dan desain UI responsif. Dalam demo ini, Anda menetapkan lebar menggunakan clamp seperti ini: width: clamp(<min>, <actual>, <max>)
.
Tindakan ini akan menetapkan ukuran minimum dan maksimum absolut, serta ukuran sebenarnya. Dengan nilai, tampilannya dapat 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 'aktual' adalah 50%, yang mewakili 50% lebar induk elemen ini.
Fungsi clamp()
di sini memungkinkan elemen ini mempertahankan lebar 50% hingga 50% lebih besar dari 46ch
(pada area pandang yang lebih lebar), atau lebih kecil dari 23ch
(pada area pandang yang lebih kecil). Anda dapat melihat bahwa saat saya meregangkan dan menciutkan ukuran induk, lebar kartu ini meningkat ke titik maksimum yang dikencangkan dan menurun ke titik minimum yang dikencangkan. Kemudian, elemen tersebut tetap berada di tengah induk karena kita telah menerapkan properti tambahan untuk memusatkan elemen tersebut. Hal ini memungkinkan tata letak yang lebih mudah dibaca, karena teks tidak akan terlalu lebar (di atas 46ch
) atau terlalu sempit 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 tetap dibatasi antara 1.5rem
dan 3rem
, tetapi akan bertambah dan berkurang berdasarkan nilai sebenarnya 20vw
agar sesuai dengan lebar area pandang.
Ini adalah teknik yang bagus untuk memastikan keterbacaan dengan nilai ukuran minimum dan maksimum, tetapi ingat bahwa teknik ini tidak didukung di semua browser modern, jadi pastikan Anda memiliki penggantian dan melakukan pengujian.
10. Menghormati Aspek: aspect-ratio: <width> / <height>
Terakhir, alat tata letak terakhir ini adalah yang paling eksperimental. Fitur ini baru-baru ini diperkenalkan ke Chrome Canary di Chromium 84, dan ada upaya aktif dari Firefox untuk menerapkannya, tetapi saat ini belum ada di edisi browser stabil.
Namun, saya ingin menyebutkan hal ini karena ini adalah masalah yang sering terjadi. Dan itu hanya mempertahankan rasio aspek gambar.
Dengan properti aspect-ratio
, saat saya mengubah ukuran kartu, blok visual hijau akan 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 hack padding-top
dan memberinya padding 56.25%
untuk menetapkan rasio atas-ke-lebar. Kami akan segera memiliki properti untuk menghindari peretasan dan kebutuhan untuk menghitung persentase. Anda dapat membuat persegi dengan rasio 1 / 1
, rasio 2 banding 1 dengan 2 / 1
, dan apa pun yang Anda perlukan agar gambar ini diskalakan dengan rasio ukuran yang ditetapkan.
.square {
aspect-ratio: 1 / 1;
}
Meskipun fitur ini masih dalam pengembangan, fitur ini penting untuk diketahui karena dapat menyelesaikan banyak masalah developer yang sering saya hadapi, terutama dalam hal video dan iframe.
Kesimpulan
Terima kasih telah mengikuti perjalanan ini melalui 10 baris CSS yang efektif. Untuk mempelajari lebih lanjut, tonton video lengkap, dan coba demo sendiri.