membagi kolom dengan fungsi colomn-count pada css

Hai teman-teman semuanya, apa kabar, semoga tetap dalam keadaan sehat, kita lanjut lagi belajarnya, kali ini kita akan belajar salah satu properti css yang berfungsi untuk membagi kolom pada website yang akan kita bahas pada tutorial kali ini yang berjudul membagi kolom dengan fungsi colomn-count pada css.

Teman-teman mungkin sudah lumrah dengan teknik pembagian kolom pada website, yups yang kita tau teknik pembagian kolom atau multi kolom pada website kita bisa menggunakan propertis float pada css untuk membagi kolom, nah disini saya akan mengajarkan bagaimana cara membagi kolom dengan Propertis colomn-count pada css.

Untuk fungsinya tadi saya sudah jelaskan sekarang kita lanjut saja pada prakteknya, silahakan teman-teman buat sebuah file dan ketikan script berikut ini:

<!DOCTYPE html>
<html>
<head>
	<title>Latihan</title>
</head>
<body>
		<div>
			<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas, nisi ac ultrices dictum, risus mauris lobortis nunc, a tempor leo mi a erat. Nullam aliquet ligula id ipsum malesuada, feugiat sodales eros tempus. Suspendisse dignissim, nunc id pretium hendrerit, elit dolor fringilla elit, eget lobortis quam libero eu magna. Maecenas volutpat ultrices nunc, at faucibus ipsum egestas sed. Proin sit amet ex ut nulla malesuada rutrum. Morbi tempor quam ante, vel dictum ipsum sollicitudin vel. Maecenas pharetra viverra tortor sit amet fermentum. Praesent vulputate ex ut iaculis lobortis.</p>

			<p>Praesent dignissim velit justo, ut gravida odio dictum eget. Ut feugiat, nulla sed sagittis efficitur, magna massa condimentum mi, nec viverra sapien erat ac nisi. Praesent porta risus a gravida volutpat. Donec in imperdiet purus. Praesent ullamcorper nunc quis facilisis bibendum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent interdum lacus a enim tempus consectetur. Pellentesque semper dapibus est, ac eleifend libero rutrum hendrerit. Proin pretium purus ut felis sagittis, ac porttitor ipsum sagittis. Nulla sollicitudin interdum interdum.</p>

			<p>Nunc convallis orci a ligula pulvinar varius. Aenean eget ultrices justo. Quisque ullamcorper, risus sed elementum dignissim, lorem nulla tincidunt enim, sit amet interdum diam dui non nisi. Aenean vehicula mauris in nisl hendrerit, a fermentum elit lobortis. Proin porta neque leo, et ultrices ipsum mollis vitae. Cras et posuere diam. Morbi placerat tellus vitae neque ultrices, sed lacinia nibh posuere. Morbi a interdum velit. Etiam nec est sapien. Vestibulum mi elit, vehicula egestas urna quis, consectetur facilisis tortor. </p>
		</div>
</body>
</html>

Script diatas saya membuat sebuah div dimana didalam divÂ ini saya menyisipkan 3 buat paragraf didalamnya, nah jika sudah teman-teman bisa save file tersebut lalu jalankan pada browser hasilnya akan seperti ini :

hasilnya masih seperti biasa, nah sekarang coba teman-teman tambahkan script css berikut ini:

<style>
     div {
	width:900px;
	margin:auto;
	column-count:3;
       }
</style>

Jika teman-teman save maka hasilnya akan seperti berikut ini:

Kolom akan terbagi menjadi 3. Gimana teman-teman cukup mudah bukan? saya rasa untuk tutorial kali ini tentang membagi kolom dengan fungsi colomn-count pada css cukup sampai disini dulu, sampai bertemu lagi pada tutorial berikutnya.

Terima kasih.

Membagi Kolom Dengan Fungsi Column-count Pada CSS

Kategori