Selama bertahun-tahun, terapung CSS telah menjadi komponen yang rapi, namun perlu, dalam membuat susun atur laman web. Jika reka bentuk anda dipanggil untuk pelbagai lajur, anda berpaling kepada terapung. Masalah dengan kaedah ini ialah, walaupun kebijaksanaan yang luar biasa yang dibuat oleh pereka / pemaju web dalam membuat susun atur tapak yang kompleks, terapung CSS tidak pernah benar-benar dimaksudkan untuk digunakan dengan cara ini.
Walaupun pelampung dan kedudukan CSS pasti mempunyai tempat dalam reka bentuk web untuk beberapa tahun akan datang, teknik susunatur yang lebih baru termasuk CSS Grid dan Flexbox kini memberikan pereka web cara baru untuk membuat susun atur laman web mereka. Satu lagi teknik susunatur baru yang menunjukkan banyak potensi adalah CSS Columns Multiple.
Lajur CSS telah wujud selama beberapa tahun sekarang, tetapi kekurangan sokongan dalam pelayar lama (terutamanya versi Internet Explorer yang lebih tua) telah memelihara banyak profesional web daripada menggunakan gaya ini dalam kerja pengeluaran mereka.
Dengan akhir sokongan untuk versi IE yang lebih tua, beberapa pereka web kini sedang bereksperimen dengan pilihan susunatur CSS baru, CSS Columns disertakan, dan mendapati bahawa mereka mempunyai lebih banyak kawalan dengan pendekatan baru ini daripada yang mereka lakukan dengan terapung.
Asas-Asas Lajur CSS
Seperti namanya, CSS Columns Multiple (juga dikenali sebagai susun atur multi-kolom CSS3) membolehkan anda memecah kandungan ke dalam beberapa set lajur. Ciri-ciri CSS yang paling asas yang akan anda gunakan ialah:
- kiraan kira-kira
- jurang ruang
Untuk menghitung lajur, anda menyatakan bilangan lajur yang anda mahu. Jurang lajur adalah selokan atau jarak antara lajur tersebut. Pelayar akan mengambil nilai-nilai ini dan memecah kandungan secara merata ke dalam bilangan lajur yang anda tentukan.
Satu contoh umum dari pelbagai lajur CSS dalam amalan ialah untuk membahagi blok kandungan teks ke dalam beberapa lajur, sama seperti yang anda lihat dalam artikel akhbar. Katakan anda mempunyai markup HTML berikut (ambil perhatian bahawa sebagai contoh tujuan, saya hanya meletakkan permulaan satu perenggan, sementara dalam praktiknya mungkin ada banyak perenggan kandungan dalam markup ini):
Jika anda kemudian menulis gaya CSS ini:
.content {-moz-column-count: 3; -webkit-column-count: 3; kiraan lajur: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; ruang-jurang: 30px; }
Peraturan CSS ini akan memisahkan bahagian "kandungan" menjadi 3 lajur yang sama dengan jurang 30 piksel di antara mereka. Jika anda menginginkan dua lajur dan bukannya 3, anda hanya akan mengubah nilai itu dan pelayar akan mengira lebar baru bagi lajur tersebut untuk memecah kandungan secara sama rata. Perhatikan bahawa kami menggunakan ciri-prefixed vendor terlebih dahulu, diikuti dengan perisytiharan yang tidak bersambung.
Semudah ini, penggunaannya dengan cara ini boleh dipersoalkan untuk kegunaan laman web. Ya, anda boleh membahagi sekumpulan kandungan ke dalam beberapa lajur, tetapi ini mungkin bukan pengalaman membaca terbaik untuk Web, terutama jika ketinggian lajur ini jatuh di bawah "lipatan" skrin.
Pembaca kemudian perlu menatal ke atas dan ke bawah untuk membaca kandungan penuh. Namun, pengetua CSS Columns adalah semudah yang anda lihat di sini, dan ia boleh digunakan untuk melakukan lebih daripada sekadar membahagikan kandungan beberapa perenggan - ia boleh digunakan untuk susun atur.
Layout Dengan CSS Columns
Katakan bahawa anda mempunyai laman web dengan kawasan kandungan yang mempunyai 3 lajur kandungan. Ini adalah susun atur laman web yang sangat tipikal, dan untuk mencapai 3 lajur ini, biasanya anda akan mengaplikasikan bahagian-bahagian yang berada di dalam. Dengan CSS multiple-columns, ia adalah lebih mudah.
Berikut ialah beberapa contoh HTML:
