Properti column-count dan column-gap menyusun teks panjang ke dalam kolom majalah secara otomatis.
CSS Multiple Columns
Contoh Kode CSS Multiple Columns:
<!DOCTYPE html>
<html>
<head>
<style>
.koran {
column-count: 2;
column-gap: 30px;
column-rule: 1px solid #cbd5e1;
text-align: justify;
font-family: serif;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="koran">
CSS Multiple Columns memungkinkan teks mengalir secara alami dari satu kolom ke kolom berikutnya seperti majalah berita ternama. Ini mempermudah pengguna membaca tulisan panjang di layar monitor lebar tanpa membuat mata lelah mengikuti baris kalimat yang terlalu panjang.
</div>
</body>
</html>
Uji dan amati bagaimana deklarasi CSS CSS Multiple Columns mengubah tampilan elemen di atas.