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.
Misalnya:
.wadah {
jumlah kolom: 3;
}
Anda juga dapat menentukan lebar dan celah kolom. Anda dapat mengatur nilai lebar kolom menggunakan salah satu dari unit CSS yang didukung menyukai px, em, atau %.
Jika lebar kolom diatur ke mobil, browser 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:
.wadah {
jumlah kolom: 3;
lebar kolom: 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:
.wadah {
jumlah kolom: 3;
kolom-celah: 20px; /* menyetel jarak antar kolom menjadi 20 piksel */
}
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 antar browser dan mungkin juga bergantung pada ukuran font, tinggi baris, 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-kolom-tata letak {
jumlah kolom: 3;
kolom-celah: 20px;
isi kolom: keseimbangan;
}
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 keseimbangan, kami 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 menggunakan peningkatan progresif sehingga Anda tidak bergantung pada JavaScript.
Menyatukan Semuanya
Anda dapat menyatukan semua yang telah Anda pelajari tentang menerapkan 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.
html>
<html>
<kepala>
<tautanrel="lembar gaya"href="Kolom CSS.css" />
kepala>
<tubuh>
Elemen Wadah
<divkelas="tata letak majalah">Elemen Anak
<divkelas="artikel">
<h2>Judul artikelh2><P>Lorem ipsum dolor sit amet, consectetur adipiscing elite. Masuk
magna vel lorem pharetra bibendum.P>
div><divkelas="artikel">
<h2>Judul artikelh2><P>Lorem ipsum dolor sit amet, consectetur adipiscing elite. Masuk
magna vel lorem pharetra bibendum.P>
div><divkelas="artikel">
<h2>Judul artikelh2><P>Lorem ipsum dolor sit amet, consectetur adipiscing elite. Masuk
magna vel lorem pharetra bibendum.P>
div>
div>
tubuh>
html>
Untuk membuat tata letak bergaya majalah menggunakan modul CSS Multi-column, gabungkan jumlah kolom, lebar kolom, kolom-celah, Dan isi kolom properti:
.magazine-layout {
jumlah kolom: 3;
lebar kolom: 300px;
kolom-celah: 20px;
isi kolom: keseimbangan;
}
.artikel {
warna latar belakang: #f8f8f8;
radius perbatasan: 4px;
bayangan kotak: 0 2px 4pxrgba(0, 0, 0, 0.1);
lapisan: 10px;
pembobolan: menghindari-kolom;
}
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 kolom, akan 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:
.wadah {
/* Fallback untuk browser yang tidak mendukung jumlah kolom */
lebar: 100%;
}
/* Deteksi dukungan untuk jumlah kolom */
@dukungan (jumlah kolom:3) {
.wadah {
jumlah kolom: 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 bersama-sama, Anda dapat membuat tata letak yang lebih canggih dan dinamis yang beradaptasi ke preferensi pengguna dan ukuran perangkat yang berbeda, membuat konten web Anda lebih mudah diakses dan menarik bagi pengguna Anda.
