Kapan Anda Menggunakan Kolom CSS? Kecerdasan Data PlatoBlockchain. Pencarian Vertikal. Ai.

Kapan Anda Menggunakan Kolom CSS?

Itu tidak retoris: Saya sangat tertarik untuk menemukan kasus penggunaan yang bagus untuk tata letak multi-kolom CSS.

Jawabannya tampaknya langsung. Gunakan kolom saat Anda ingin membagi konten apa pun menjadi kolom, bukan? Berikut adalah jenis contoh yang akan Anda temukan di artikel yang menunjukkan cara kerja tata letak mutli-kolom CSS, termasuk milik kami Almanak:

Tepat. Tetapi apakah ini kasus penggunaan yang sebenarnya? Mungkin. Jika teksnya relatif singkat, maka mungkin itu adalah sentuhan yang bagus. Begitulah cara saya menjualnya kepada diri saya sendiri ketika mendesain ulang situs web saya beberapa tahun lalu. Hari ini tidak seperti itu, tapi seperti inilah tampilannya saat itu:

Kapan Anda Menggunakan Kolom CSS?

Tapi seluruh artikel bentuk panjang dipecah menjadi kolom? Saya menyukainya di surat kabar tetapi ragu untuk menggulir halaman web ke bawah untuk membaca satu kolom, hanya untuk menggulir kembali ke atas untuk melakukannya lagi.

Saya kira kita dapat menggunakannya untuk menempatkan dua elemen secara berdampingan, tetapi flexbox jauh lebih cocok untuk itu. Plus, batasan mencegah kami memilih kolom untuk mengukurnya satu per satu. Kolom harus memiliki lebar yang sama.

Satu hal yang dimiliki kolom untuk mereka adalah bahwa mereka adalah satu-satunya metode tata letak CSS yang fragmen isi. (Yaitu, kecuali kita menghitung Wilayah CSSโ€ฆ apa yang terjadi dengan itu?!) Jadi, jika Anda ingin membagi paragraf menjadi kolom, itu sudah mungkin tanpa pembungkus tambahan.

Kapan lagi Anda perlu membagi blok konten yang berkelanjutan menjadi kolom? Saya ingat perlu melakukan itu ketika saya memiliki daftar barang yang tidak berurutan. Saya suka cara daftar dapat membuat konten mudah dipindai, tetapi daftar panjang dapat membuat satu sisi halaman terlihat sangat berat. Katakanlah, misalnya, bahwa kami mencantumkan semua tag posting untuk Trik-CSS dalam grup abjad. Tata letak multi-kolom berfungsi dengan baik untuk itu:

Silakan dan coba ubah ukuran lebar viewport. Tiga kolom ditentukan tetapi jumlahnya akan berubah berdasarkan jumlah ruang yang tersedia. Harus menyukai semua kebaikan responsif itu tanpa pekerjaan kueri media!

Saya sedang mengerjakan demo untuk :left pseudo-class dan meraih columns karena ini adalah cara yang bagus untuk memecah hal-hal untuk mencetak demo. Jadi, saya kira ada kasus penggunaan lain. Dan saat membuat demo, saya menyadari bahwa tata letak multi-kolom dapat digunakan untuk membuat kisi-kisi batu, seperti galeri gambar:

Tapi apa lagi? Apakah kita terbatas pada paragraf pendek, daftar panjang, dan kisi-kisi yang mengalir bebas?

Stempel Waktu:

Lebih dari Trik CSS