Mengenal Property column-count pada CSS
Hallo sobat program, ketemu lagi dengan saya Rizal dan alhamdulilah masih diberikan medis bagi saya dapat memberikan panduan atau tips tips mengenai pemrograman situs. dan bagi pembahasan kali ini saya akan membahas mengenai Mengenal Property Column-count di CSS.
Bikin kalian yang belum mengenal column-count di css tak usah khawatir karena disini saya akan menjelaskan sedetail mungkin mengenai property column-count di css serta pemakaian dari property tersebut bagi situs kita.
Oke seketika saja kemateri mengenai Mengenal Property Column-count di CSS. column adalah kolom dan count adalah perhitungan ya sobat. Jadi kalau disatukan perhitungan kolom. Namun disini property tersebut bukan bagi menghitung kolom melainkan bagi membagi kolom di paragraph sebanyak yg kita inginkan.
Telah mulai ada bayangan ? oke kalau belum mari kita mulai mempraktekannya. Langkah pertama-tama silahkan bikin folder terlebih dahulu lalu kemudian ketikanlah kode HTML seperti di 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>
Sekiranya telah dengan kode HTML nya, langkah berikutnya kita tambahkan css berikut ini :
.container {
width: 680px;
margin:auto;
padding: 10px;
}Di kode CSS diatas kita belum menggunakan property column-count ya sobat. Dan sekiranya dijalankan dibrowser karenanya hasilnya akan menjadi seperti ini :
Oke dan langkah terakhir silahkan tambahkan property column-count seperti di contoh dibawah ini :
p {
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
column-count: 4;
}Sekiranya telah silahkan refresh kembali dan hasilnya akan berubah menjadi seperti di contoh dibawah ini :
Bagaimana sobat program ? lumayan paham ya mengenai property column-count ini ? betul-betul gampang ya. Oke kalau seperti itu lumayan hingga disini dahulu pembahasan saya mengenai Mengenal Property Column-count di CSS. semoga dapat betul-betul bermanfaat bikin kalian. Dan hingga bertemu di panduan atau pembahasan berikutnya.
Terimakasih
Sumber https://kursuswebsite.org
