Mengenal Property column-gap pada CSS

Hallo sobat program, bertemu lagi dengan saya Rizal dan alhamdulilah masih diberikan nikmat serta kesehatan untuk saya dapat kembali menulis tutorial ini tentang Mengenal Property Column-Gap pada CSS.

Dipembahasan ini hampir tidak jauh berbeda pada pembahasan sebelumnya tentang property column-count dan saya harap teman-teman melihat atau membaca artikel yang sebelumnya terlebih dahulu disini.

Oke lanjut kepembahasan sekarang kita akan membahas tentang Mengenal Property Column-Gap pada CSS. column berarti kolom dan gap merupakan spasi atau jarak ya sobat program. Jadi kalau disatukan jarak antar kolom kurang lebihnya seperti itu.

Agar sobat lebih memahami property ini mari kita mulai untuk mencoba menggunakannya. Langsung saja kalian buat file HTML nya dan silahkan ketikan kode HTML seperti pada contoh dibawah ini :

<!DOCTYPE html>
<html>
<head>
	<title>Column-Gap Property CSS</title>
</head>
<body>
	<div class="container">
		<h2>The column-gap 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 silahkan kalian tambahan style CSS nya seperti pada contoh dibawah ini :

    .container {
			width: 680px;
			margin:auto;
			padding: 10px;
		}
		p {
			-webkit-column-count: 4; /* Chrome, Safari, Opera */
		    -moz-column-count: 4; /* Firefox */
		    column-count: 4;

		    -webkit-column-gap: 50px; /* Chrome, Safari, Opera */
		    -moz-column-gap: 50px; /* Firefox */
		    column-gap: 50px;
		}

Oke jika kedua kode diatas sudah sesuai maka silahkan simpan dan coba dijalankan di browser yang kalian gunakan. Jika benar maka hasilnya akan menjadi seperti pada contoh dibawah ini :

Oke sangat mudah ya dan hampir sama pada materi sebelumnya. Dan seperti inilah untuk pembahasan saya kali ini tentang Mengenal Property Column-Gap pada CSS. semoga dapat sangat bermanfaat buat kalian dan sampai bertemu pada tutorial selanjutnya.

Terimakasih

Kategori