Mengenal Property column-count pada CSS

Hallo sobat program, ketemu lagi dengan saya Rizal dan alhamdulilah masih diberikan kesehatan untuk saya dapat memberikan tutorial atau tips tips tentang pemrograman website. dan untuk pembahasan kali ini saya akan membahas tentang Mengenal Property Column-count pada CSS.

Buat kalian yang belum mengenal column-count pada css tidak usah khawatir karena disini saya akan menjelaskan sedetail mungkin tentang property column-count pada css serta penggunaan dari property tersebut untuk website kita.

Oke langsung saja kemateri tentang Mengenal Property Column-count pada CSS. column merupakan kolom dan count merupakan perhitungan ya sobat. Jadi kalau disatukan perhitungan kolom. Tapi disini property tersebut bukan untuk menghitung kolom melainkan untuk membagi kolom pada paragraph sebanyak yg kita inginkan.

Sudah mulai ada bayangan ? oke kalau belum mari kita mulai mempraktekannya. Langkah pertama silahkan buat folder terlebih dahulu lalu kemudian ketikanlah kode HTML seperti pada contoh dibawah ini :

<!DOCTYPE html>
<html>
<head>
	<title>Column-Count Property CSS</title>
</head>
<body>
	<div class="container">
		<h2>The column-count Property CSS</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
	</div>
</body>
</html>

Jika sudah dengan kode HTML nya, langkah berikutnya kita tambahkan css berikut ini :

.container {
			width: 680px;
			margin:auto;
			padding: 10px;
		}

Pada kode CSS diatas kita belum menggunakan property column-count ya sobat. Dan jika dijalankan dibrowser maka hasilnya akan menjadi seperti ini :

Oke dan langkah terakhir silahkan tambahkan property column-count seperti pada contoh dibawah ini :

p {
		-webkit-column-count: 4; /* Chrome, Safari, Opera */
		-moz-column-count: 4; /* Firefox */
		column-count: 4;
	}

Jika sudah silahkan refresh kembali dan hasilnya akan berubah menjadi seperti pada contoh dibawah ini :

Bagaimana sobat program ? cukup paham ya tentang property column-count ini ? sangat mudah ya. Oke kalau begitu cukup sampai disini dahulu pembahasan saya tentang Mengenal Property Column-count pada CSS. semoga dapat sangat bermanfaat buat kalian. Dan sampai bertemu pada tutorial atau pembahasan selanjutnya.

Terimakasih

Mengenal Property column-count pada CSS

Kategori