Memiliki sebuah website responsive pasti idaman dari semua orang yah karena sangat menarik untuk diliat dan support dari berbagai device, bisa dibuka di smartphone, tablet dan monitor dengan ukuran besar, nah sistem responsive sendiri mudah untuk kita pelajari dari framework bootstrap dan lain sebagainya, nah gimana kalo kita membuat sebuah kolom responsive menggunakan CSS3 biasa?
penasaran gak gimana belakang layarnya dalam membuat sebuah kolom menjadi responsive, yok langsung saja kita praktekan, teman teman siapkan sebuah file baru yah dengan nama kolom.html kita akan membuatkan struktur html dan css didalam satu file html. Salinkan code berikut :
<html>
<head>
<meta charset=”UTF-8″>
<title> KOLOM COUNT RESPONSIVE </title>
<style>
.menu { column-count: 3 }
.kontenmenu { background : lightgreen; height: 200px; margin-bottom: 20px }
</style>
</head>
<body>
<div class=”menu”>
<div class=”kontenmenu”> LOREM IPSUM TEXT DUMMY </div>
<div class=”kontenmenu”> LOREM IPSUM TEXT DUMMY </div>
<div class=”kontenmenu”> LOREM IPSUM TEXT DUMMY </div>
<div class=”kontenmenu”> LOREM IPSUM TEXT DUMMY </div>
<div class=”kontenmenu”> LOREM IPSUM TEXT DUMMY </div>
<div class=”kontenmenu”> LOREM IPSUM TEXT DUMMY </div>
</div>
</body>
</html>
Dan save lalu jalankan, jika berhasil maka hasilnya akan seperti ini ;
Cukup mudah bukan?, teman teman bisa mainkan resolusi dari layar monitor teman teman bisa diuji apakah responsive atau tidak, oke cukup sekian tutorial tentang Bagaimana Cara Membuat Kolom Responsive Menggunakan Html5 Dan Css3. Sampai bertemu diartikel selanjutnya dan sampai jumpa.
#KeepLearn
#IsmetMA