Menerapkan Tata Letak Dengan Modul Multi-Kolom CSS
Table of content:
Modul Tata Letak Multi-kolom CSS adalah alat canggih yang memungkinkan Anda membuat tata letak multi-kolom dengan mudah untuk halaman web Anda. Munculnya desain responsif berarti penting untuk memahami cara menggunakan modul ini.
Anda dapat menggunakan properti kolom untuk membuat tata letak yang fleksibel dan dinamis yang menyesuaikan dengan ukuran layar yang berbeda.
Menentukan Nomor Kolom, Lebar, dan Celah
Untuk membuat tata letak multi-kolom yang sesuai untuk konten halaman Anda, Anda harus mulai dengan menentukan berapa banyak kolom yang ingin Anda rentangkan. Salah satu properti terpenting dalam modul Multi-kolom adalah jumlah kolom properti, yang Anda gunakan untuk mengatur jumlah kolom untuk membagi konten.
Baca Juga:
Misalnya:
.container {
column-count: 3;
}
Anda juga dapat menentukan lebar dan celah kolom. Anda dapat mengatur nilai lebar kolom menggunakan salah satu unit CSS yang didukung seperti px, ematau %.
Jika lebar kolom diatur ke mobilbrowser akan menghitung lebar setiap kolom berdasarkan jumlah kolom properti dan ruang yang tersedia di dalam tata letak Anda.
Misalnya, CSS ini mendeklarasikan 3 kolom, masing-masing dengan lebar 200 piksel:
.container {
column-count: 3;
column-width: 200px;
}
Itu kolom-celah properti menentukan celah, atau ruang, antara kolom dalam tata letak multi-kolom. Ini akan mengatur ukuran ruang kosong antara kolom yang berdekatan dan dapat mengambil nilai panjang dalam piksel, ems, atau unit lain yang didukung.
Misalnya:
.container {
column-count: 3;
column-gap: 20px;
}
Secara default, nilai dari kolom-celah diatur ke normal. Peramban Anda memilih nilai ini untuk mencapai jarak yang konsisten antar kolom dalam tata letak Anda sambil tetap menyenangkan secara visual. Nilai ini juga dapat bervariasi di antara browser dan mungkin juga bergantung pada ukuran font, tinggi garis, properti posisi, dan properti tata letak lainnya dari konten kolom.
Memastikan Keseimbangan Kolom
Kolom CSS mencoba mengisi semua ruang yang tersedia di dalam tata letak. Hal ini terkadang dapat mengakibatkan kolom memiliki ketinggian yang sangat berbeda, membuat tata letak terlihat tidak rata.
Untuk menyeimbangkan kolom, Anda harus memastikan bahwa setiap kolom dalam tata letak memiliki jumlah konten yang kira-kira sama.
Anda dapat mencapai ini dengan mengatur CSS isi kolom properti untuk keseimbangan. Browser kemudian akan mencoba untuk mendistribusikan konten secara merata di semua kolom sehingga tingginya kira-kira sama.
Itu isi kolom properti diatur ke keseimbangan secara default, tetapi nilai mobil akan mengubah perilaku ini. Menggunakan otomatis mendistribusikan konten di seluruh kolom berdasarkan ruang yang tersedia. Hal ini dapat mengakibatkan jarak antar kolom yang tidak rata dan ketinggian kolom yang tidak rata. Ia bahkan dapat menghasilkan tata letak dengan kolom kosong.
Berikut adalah contoh cara menggunakan isi kolom properti untuk menyeimbangkan kolom dalam tata letak multi-kolom:
.multi-column-layout {
column-count: 3;
column-gap: 20px;
column-fill: balance;
}
Dalam contoh ini, kami memiliki tata letak multi-kolom dengan tiga kolom dan jarak 20 piksel di antara setiap kolom. Dengan mengatur isi kolom properti untuk keseimbangankami memastikan bahwa konten didistribusikan secara merata ke seluruh kolom, sehingga menghasilkan tinggi kolom yang seimbang.
Penting untuk dicatat bahwa isi kolom properti mungkin tidak berfungsi dengan baik untuk semua tata letak dan dapat mengakibatkan jarak antar kolom yang tidak rata. Dalam kasus seperti itu, Anda mungkin perlu menggunakan JavaScript untuk menyeimbangkan kolom secara manual. Ingatlah untuk mengikuti praktik terbaik dan gunakan peningkatan progresif sehingga Anda tidak bergantung pada JavaScript.
Menyatukan Semuanya
Anda dapat menyatukan semua yang telah Anda pelajari tentang mengimplementasikan tata letak dengan kolom CSS dan menggunakannya untuk membuat tata letak bergaya majalah.
Pertama, buat struktur HTML dasar. Gunakan elemen penampung untuk membungkus konten Anda, lalu buat beberapa elemen anak yang kemudian dapat Anda tata letak dalam kolom.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSScolumns.css" />
</head>
<body>
<div class="magazine-layout">
<div class="article">
<h2>Article Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.</p>
</div>
<div class="article">
<h2>Article Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.</p>
</div>
<div class="article">
<h2>Article Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.</p>
</div>
</div>
</body>
</html>
Untuk membuat tata letak bergaya majalah menggunakan modul CSS Multi-column, gabungkan jumlah kolom, lebar kolom, kolom-celahDan isi kolom properti:
.magazine-layout {
column-count: 3;
column-width: 300px;
column-gap: 20px;
column-fill: balance;
}.article {
background-color: #f8f8f8;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 10px;
break-inside: avoid-column;
}
Contoh ini juga mendefinisikan pembobolan properti di .artikel kelas, dengan nilai menghindari-kolom. Properti ini memastikan bahwa setiap artikel tetap berada dalam satu kolom, bukan terbagi menjadi beberapa kolom. Begini tampilan tata letaknya:
Menggunakan Fallback untuk Peramban yang Tidak Didukung
Penting untuk dicatat bahwa jumlah kolom properti tidak didukung di semua browser. Browser yang tidak mendukung jumlah kolomakan menampilkan konten dalam satu kolom saja.
Untuk menyediakan gaya fallback untuk browser yang tidak didukung, Anda dapat menggunakan kueri fitur seperti @dukungan untuk mendeteksi dukungan untuk jumlah kolom properti dan berikan gaya alternatif saat properti tidak didukung.
Misalnya:
.container {
width: 100%;
}
@supports (column-count: 3) {
.container {
column-count: 3;
}
}
Dalam contoh ini, kami menggunakan @dukungan kueri fitur untuk mendeteksi dukungan untuk jumlah kolom Properti. Jika browser mendukung jumlah kolom, maka wadah elemen akan ditampilkan dalam tiga kolom. Jika browser tidak mendukung jumlah kolom, itu akan menampilkan konten dalam satu kolom menggunakan lebar Properti.
Memecah Konten Menjadi Kolom
Secara keseluruhan, kolom CSS memberikan cara yang praktis dan ampuh untuk membuat tata letak multikolom yang fleksibel dan responsif yang meningkatkan kegunaan dan pengalaman pengguna konten web.
Dengan menggunakan kolom CSS dan JavaScript secara bersamaan, Anda dapat membuat tata letak yang lebih canggih dan dinamis yang menyesuaikan dengan preferensi pengguna dan ukuran perangkat yang berbeda, menjadikan konten web Anda lebih mudah diakses dan menarik bagi pengguna Anda.
Artikel Terkait
