Postingan ini menyoroti beberapa baris CSS canggih yang melakukan banyak penyesuaian dan membantu Anda membuat tata letak modern yang andal.
Dipublikasikan: 7 Juli 2020, Terakhir diperbarui: 15 Desember 2025
Tata letak CSS modern memungkinkan developer menulis aturan gaya yang benar-benar bermakna dan kuat hanya dengan beberapa penekanan tombol. Pembahasan di atas dan postingan berikutnya ini membahas 10 baris CSS canggih yang melakukan banyak penyesuaian penting.
Untuk mengikuti atau mencoba sendiri demo ini, lihat sematan situs di atas, atau buka 1linelayouts.com.
01. Super Tengah: place-items: center
Untuk tata letak 'satu baris' pertama, mari kita pecahkan misteri terbesar di semua CSS: memusatkan elemen. Kami ingin Anda tahu bahwa dengan place-items: center, semuanya lebih mudah dari yang Anda kira.
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 intrinsik.
02. Pancake yang Didekonstruksi: flex: <grow> <shrink> <baseWidth>
Selanjutnya, kita punya pancake yang terurai. Tata letak ini umum digunakan untuk situs pemasaran, misalnya, yang mungkin memiliki baris 3 item, biasanya dengan gambar, judul, lalu beberapa teks, yang menjelaskan beberapa fitur produk. Di perangkat seluler, kita ingin elemen tersebut disusun dengan baik, dan diperluas saat kita memperbesar 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: flex: <flex-grow> <flex-shrink> <flex-basis>.
Oleh karena itu, jika Anda ingin kotak terisi hingga ukuran <flex-basis>, menyusut pada ukuran yang lebih kecil, tetapi tidak meregang untuk mengisi ruang tambahan, tulis: flex: 0 1 <flex-basis>. Dalam hal ini, <flex-basis> Anda adalah 150px sehingga akan terlihat seperti:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Jika Anda ingin kotak membentang dan mengisi ruang saat di-wrap ke baris berikutnya, tetapkan <flex-grow> ke 1, sehingga akan terlihat seperti:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Sekarang, saat Anda memperbesar atau memperkecil ukuran layar, kedua item fleksibel ini akan mengecil dan membesar.
03. Sidebar Berisi: 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, sidebar dapat diperluas hingga 25%. Sidebar akan selalu menempati 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 kasus ini) mendapatkan minmax 150px di 25%, dan item kedua (bagian main di sini) menggunakan ruang yang tersisa sebagai satu jalur 1fr.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Tumpukan Pancake: grid-template-rows: auto 1fr auto
Tidak seperti Deconstructed Pancake, contoh ini tidak membungkus turunannya saat ukuran layar berubah. Tata letak ini, yang biasa disebut sebagai footer tetap, sering digunakan untuk situs dan aplikasi, di seluruh aplikasi seluler (footer biasanya berupa toolbar), dan situs (aplikasi halaman tunggal 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.
Untuk membuat footer tetap berada di bagian bawah, tambahkan:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Tindakan ini akan menyetel konten header dan footer agar otomatis mengambil ukuran turunannya, dan menerapkan ruang yang tersisa (1fr) ke area utama, sementara 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 Cawan Suci Klasik: grid-template: auto 1fr auto / auto 1fr auto
Untuk tata letak cawan suci klasik ini, ada header, footer, sidebar kiri, sidebar kanan, dan konten utama. Tata letaknya mirip dengan tata letak sebelumnya, tetapi sekarang dengan sidebar.
Untuk menulis seluruh petak ini menggunakan satu baris kode, gunakan properti grid-template. Dengan demikian, Anda dapat 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 pemisah 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 berukuran otomatis, di sini sidebar kiri dan kanan berukuran otomatis 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 tata letak klasik lainnya: petak 12 rentang. Anda dapat menulis petak dengan cepat 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 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 seluruh baris dari baris pertama hingga 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 garis awal dan jumlah kolom yang akan 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 ditempatkan secara otomatis dan fleksibel. Cukup rapi. Istilah utama yang perlu diingat di sini adalah repeat, auto-(fit|fill), dan minmax()', yang dapat Anda ingat dengan akronim RAM.
Jika digabungkan, tampilannya akan seperti ini:
.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 di 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 membentang saat ukuran horizontalnya melebihi 150 piksel untuk mengisi seluruh ruang yang tersisa. Namun, jika Anda mengubahnya menjadi auto-fill, item tidak akan meregang saat ukuran dasarnya dalam fungsi minmax terlampaui:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Berbaris: 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 judul, deskripsi, dan blok gambar dalam kolom vertikal di dalam kartu induk. Kemudian, penerapan justify-content: space-between menyematkan elemen pertama (judul) dan terakhir (blok gambar) ke tepi flexbox, dan teks deskriptif di antara keduanya ditempatkan dengan jarak yang sama ke setiap titik akhir.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Membatasi Gaya Saya: clamp(<min>, <actual>, <max>)
Di sinilah kita akan membahas beberapa teknik yang memiliki implikasi yang sangat menarik untuk tata letak dan desain UI responsif. Dalam demo ini, Anda akan menyetel lebar menggunakan clamp seperti ini: width: clamp(<min>, <actual>, <max>).
Tindakan ini menetapkan ukuran minimum dan maksimum absolut, serta ukuran sebenarnya. Dengan nilai, tampilannya dapat seperti ini:
.parent {
width: clamp(23ch, 60%, 46ch);
}
Ukuran minimum di sini adalah 23ch atau 23 unit karakter, dan ukuran maksimumnya adalah 46ch, 46 karakter. Unit lebar karakter didasarkan pada ukuran font elemen (khususnya lebar glyph 0). Ukuran 'aktual' adalah 50%, yang menunjukkan 50% dari lebar induk elemen ini.
Yang dilakukan fungsi clamp() di sini adalah memungkinkan elemen ini mempertahankan lebar 50% hingga 50% lebih besar dari 46ch (pada viewport yang lebih lebar), atau lebih kecil dari 23ch (pada viewport yang lebih kecil). Anda dapat melihat bahwa saat saya meregangkan dan mengecilkan ukuran induk, lebar kartu ini bertambah hingga titik maksimum yang diklem dan berkurang hingga minimum yang diklem. Kemudian, item 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 sempit dan kecil (kurang dari 23ch).
Cara 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 berkurang berdasarkan nilai aktual 20vw agar sesuai dengan lebar area tampilan.
Ini adalah teknik yang bagus untuk memastikan keterbacaan dengan nilai ukuran minimum dan maksimum.
10. Menyesuaikan Rasio Aspek: aspect-ratio: <width> / <height>
Terakhir, tata letak terakhir ini memecahkan masalah umum dalam mempertahankan rasio aspek gambar.
Dengan properti aspect-ratio, saat saya mengubah ukuran kartu, blok visual hijau mempertahankan rasio aspek 16 x 9 ini. Kami Mempertahankan 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 trik padding-top dan memberikan padding 56.25% untuk menetapkan rasio atas-ke-lebar. Kami akan segera memiliki properti untuk menghindari peretasan ini dan tidak perlu menghitung persentase. Anda dapat membuat persegi dengan rasio 1 / 1, rasio 2 banding 1 dengan 2 / 1, dan apa pun yang Anda butuhkan agar gambar ini diskalakan dengan rasio ukuran yang ditetapkan.
.square {
aspect-ratio: 1 / 1;
}
Fitur ini penting untuk diketahui karena menyelesaikan banyak masalah developer yang sering saya alami sendiri, terutama terkait video dan iframe.
Kesimpulan
Terima kasih telah mengikuti perjalanan ini melalui 10 baris CSS yang efektif. Untuk mempelajari lebih lanjut, tonton video lengkapnya, dan coba demonstrasinya sendiri.