CSS - Susun Kolom Berbeza

Hai, para pengembang web yang sedang belajar! Hari ini, kita akan mendalamkan dunia yang menarik dari susun kolom berbeza dalam CSS. Seperti gurunya yang ramah di lingkungan komputer, saya di sini untuk membimbing Anda dalam perjalanan ini dengan banyak contoh dan penjelasan. Jadi, mari kita mulai!

Pengenalan ke Susun Kolom Berbeza

Bayangkan Anda membaca surat khabar. Perhatikan bagaimana teks disusun dalam kolom yang rapi? Itu tepat apa yang kita akan capai dengan CSS, tapi di halaman web! Susun kolom berbeza membolehkan kita mencipta struktur kandungan yang menarik dan mudah dibaca.

Susun Kolom Berbeza CSS - Susun Kolom Tiga

Mari kita mulai dengan susun kolom tiga dasar. Ini sempurna untuk mencipta kandungan gaya majalah atau mengatur informasi di halaman web.

<div class="three-column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

.three-column {
column-count: 3;
column-gap: 40px;
}

Dalam contoh ini, kita menggunakan properti column-count untuk menentukan bahwa kita ingin tiga kolom. Properti column-gap menetapkan ruang antara setiap kolom.

Susun Kolom Berbeza CSS - Menetapkan column-width

kadang-kadang, instead of specifying the number of columns, you might want to set a specific width for each column. Let's see how that works:

<div class="flexible-columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

.flexible-columns {
column-width: 200px;
}

Di sini, kita menggunakan column-width untuk menetapkan setiap kolom menjadi 200 piksel lebarnya. Browser akan membuat sebanyak mungkin kolom yang dapat dipasangkan sambil menjaga lebar ini.

Susun Kolom Berbeza CSS - Gaya Kolom

Sekarang, mari kita tambahkan sedikit gaya ke kolom-kolom kita. Kita dapat menambahkan batas, mengubah warna latar belakang, dan banyak lagi!

<div class="styled-columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

.styled-columns {
column-count: 3;
column-gap: 40px;
column-rule: 4px dotted #ff00ff;
column-rule-style: dotted;
column-rule-width: 4px;
column-rule-color: #ff00ff;
}

Dalam contoh ini, kita menggunakan column-rule sebagai properti singkat untuk menambahkan garis titik antara kolom. Kita juga dapat menetapkan properti ini secara individual menggunakan column-rule-style, column-rule-width, dan column-rule-color.

Susun Kolom Berbeza CSS - Menyebar Kolom

Kadang-kadang, Anda mungkin ingin sebuah kandungan menyebar di sepanjang beberapa kolom. Mari kita lihat bagaimana kita bisa mencapai itu:

<div class="spanning-columns">
<h2>This heading spans all columns</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="span-two">This paragraph spans two columns. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>

.spanning-columns {
column-count: 3;
column-gap: 40px;
}

.spanning-columns h2 {
column-span: all;
text-align: center;
}

.span-two {
column-span: 2;
background-color: #f0f0f0;
padding: 10px;
}

Di sini, kita menggunakan column-span: all untuk membuat tajuk menyebar di sepanjang semua kolom, dan column-span: 2 untuk membuat paragraf menyebar di sepanjang dua kolom.

Susun Kolom Berbeza CSS - Kolom dan Fragmentasi

Fragmentasi merujuk kepada bagaimana kandungan dipisahkan di antara kolom. Mari kita lihat bagaimana kita dapat mengawal ini:

<div class="fragmented-columns">
<h3>Chapter 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h3>Chapter 2</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

.fragmented-columns {
column-count: 2;
column-gap: 40px;
}

.fragmented-columns h3 {
break-after: column;
}

Dalam contoh ini, kita menggunakan break-after: column untuk memastikan bahwa setiap tajuk bab dimulai di atas kolom baru.

Properti Terkait

Mari kita rangkum semua properti yang kita pelajari dalam tabel yang mudah dipahami:

Properti	Deskripsi
column-count	Menentukan jumlah kolom
column-width	Menetapkan lebar setiap kolom
column-gap	Menetapkan ruang antara kolom
column-rule	Ringkasan untuk menetapkan garis antara kolom
column-rule-style	Menetapkan gaya garis kolom
column-rule-width	Menetapkan lebar garis kolom
column-rule-color	Menetapkan warna garis kolom
column-span	Membolehkan elemen menyebar di sepanjang kolom
break-after	Mengawal pemisahan kolom setelah elemen

Danitu, teman-teman! Kita telah melakukan perjalanan melalui tanah susun kolom berbeza CSS. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba properti ini. Siapa tahu? Anda mungkin menciptakan situs web gaya majalah berikutnya!

Seperti yang kata gurunya yang lama, "CSS seperti memasak. Anda mungkin membuat kesalahan pertama kalinya, tapi dengan latihan, Anda akan menciptakan karya masterpiece dalam waktu singkat!" Jadi, terus coding, terus belajar, dan terutama, bersenang-senang dengannya!

Credits: Image by storyset