Mengenal Property column-gap pada CSS
Hallo sobat program, bertemu lagi dengan saya Rizal dan alhamdulilah masih diberikan nikmat serta medis bagi saya dapat kembali menulis panduan ini mengenai Mengenal Property Column-Gap di CSS.
Dipembahasan ini hampir tak jauh berbeda di pembahasan sebelumnya mengenai property column-count dan saya harap teman-teman melihat atau membaca artikel yang sebelumnya terlebih dahulu disini.
Oke lanjut kepembahasan sekarang ini kita akan membahas mengenai Mengenal Property Column-Gap di CSS. column berarti kolom dan gap adalah sebuah 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 bagi mencoba menggunakannya. Seketika saja kalian bikin file HTML nya dan silahkan ketikan kode HTML seperti di 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>
Sekiranya telah silahkan kalian tambahan style CSS nya seperti di 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 seandainya kedua kode diatas telah sesuai karenanya silahkan simpan dan coba dijalankan di browser yang kalian gunakan. Sekiranya benar karenanya hasilnya akan menjadi seperti di contoh dibawah ini :
Oke betul-betul gampang ya dan hampir sama di bahan sebelumnya. Dan seperti inilah bagi pembahasan saya kali ini mengenai Mengenal Property Column-Gap di CSS. semoga dapat betul-betul bermanfaat bikin kalian dan hingga bertemu di panduan berikutnya.
Terimakasih
Sumber https://kursuswebsite.org
