Membuat Kolom Responsive dengan CSS

Belakangan ini sedang trend desain web yang responsif, perkembangan desain web agar dapat tampil dengan baik dan nyaman pada browser di perangkat gadget apapun yang berbeda resolusi layarnya. Sebagian besar sobat blogger mungkin sudah mengerti, tapi beberapa waktu lalu seorang teman bertanya kepada saya soal itu dan saya coba memberikan apa yang saya ketahui untuk sedikit memahaminya.

Responsive Layout

Mungkin kita pernah membuka sebuah situs dengan menggunakan smartphone dan setelah terbuka situs tersebut terpotong tampilannya ataupun terlihat sangat kecil karena menyesuaikan dengan lebar smartphone kita, itu terjadi karena layout situs tersebut tidak menerapkan responsif desain/layout.

Kurang lebihnya desain responsif itu dimaksudkan agar desain web dapat tampil dengan baik menyesuaikan dengan lebar resolusi layar perangkat secara otomatis, misalkan pada lebar layar1024px (desktop) layout akan tampil 3 kolom, kemudian bila dibuka pada lebar layar 320px (smartphone) akan menjadi 1 kolom. Hal tersebut dimaksudkan untuk kenyamanan dan memaksimalkan tampilan layout agar semua content dapat terlihat tanpa harus terpotong dan harus menggunakan horizontal scroll di browser.

Yang harus digaris bawahi adalah ketika layout 3 kolom berubah menjadi 1 kolom itu bukan berarti 2 kolom yang lain dihilangkan, melainkan hanya di layout "ulang" untuk menyesuaikan lebar resolusi layar. Untuk menerapkan fungsi itu menggunakan salah satu bagian dari CSS3 yaitu Media Queries.

Nah atas dasar itulah sebuah tutorial kali ini juga tidak terlepas dari kata "RESPONSIVE" kali ini ini kita akan berbicara tentang pembuatan sebuah kolom yang insya allah Responsive.

VIEW A DEMO MODEL-1

VIEW A DEMO MODEL-2

Cara Penerapannya:-

Cara penerapannya sangat simpel sekali sama seperti penempatan pada widget2 yang lainnya, baik itu di sidebar ataupun dipostingan. Sobat tinggal kopas aja kodingnya dan tempatkan sesuka sobat,

UNTUK KODE CSS MODEL KE-1

 <style type='text/css'>
.responsive-kolom{
  background: rgb(230, 210, 174);
  width: 100%;
  max-width: 60em;
  margin: 0 auto;

   -webkit-border-radius: .25em; 
   -moz-border-radius: .25em; 
   border-radius: .25em;

  -moz-box-shadow: inset .125em .125em .5em rgba(68,68,68,0.2);
  -webkit-box-shadow: inset .125em .125em .5em rgba(68,68,68,0.2);
  box-shadow: inset .125em .125em .5em rgba(68,68,68,0.2);
}

.row{
  display:table;
  margin: 0 0;
  padding:.5em 0;
  border-collapse:separate;
  border-spacing: 1.25em .625em; /*use border-spacing instead of margins*/
}

.kolom-1, .kolom-2, .kolom-3{
  display:block;
  padding: 1.5em 1.25em;
  margin-bottom:.5em;
  background: rgb(252, 250, 247);
 
   -webkit-border-radius: .25em; 
   -moz-border-radius: .25em; 
   border-radius: .25em;
 
  -moz-box-shadow: .25em .25em .25em rgba(68,68,68,0.2),inset 0 0 .125em rgba(68,68,68,0.2);
  -webkit-box-shadow: .25em .25em .25em rgba(68,68,68,0.2),inset 0 0 .125em rgba(68,68,68,0.2);
  box-shadow: .25em .25em .25em rgba(68,68,68,0.2),inset 0 0 .125em rgba(68,68,68,0.2);
}

p{
 margin-top:0;
 font-size: .875em;
 line-height: 1.45;
}


@media only screen and (min-width : 32em){

.kolom-1, .kolom-2, .kolom-3{
  width: 32%;
  display: table-cell;
}
</style>

<div class="responsive-kolom">
<div class="row">
  <div class="kolom-1">
    <p>ISI KONTEN SOBAT DISINI</p>
  </div>
  <div class="kolom-2">
    <p>ISI KONTEN SOBAT DISINI</p>
  </div>
  <div class="kolom-3">
    <p>ISI KONTEN SOBAT DISINI</p>
  </div>
</div>
</div>

UNTUK KODE CSS MODEL KE-2

<style type='text/css'>
.grid {
 padding: 1em 1em 0 1em;
 margin: 0;
 column-count: 4;
 column-gap: 2em;
 column-rule: 2px outset rgba(0, 0, 128, 0.3);
}

.module {
 display: inline-block;
 margin: 10px 0 1em 0;
 list-style: none;
 background: rgba(0, 255, 0, 0.3);
 padding: 20px;
 box-shadow: 0 8px 6px -6px rgba(0, 0, 128, 0.3), 0px -8px 6px -6px rgba(0, 0, 128, 0.2);
}

a {
 text-decoration: none;
 color: rgba(0, 0, 128, 0.5);
}

a:hover {
 color: rgba(0, 0, 128, 0.3);
}

p {
 margin: 0;
}

h2 {
 margin: 0 0 0.5em 0;
 background: radial-gradient(rgba(0, 0, 128, 0.2), rgba(0, 0, 128, 0.5));
 line-height: 40px;
 text-align: center;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 color: rgba(255,255,255,0.9);
}

@media screen and (max-width: 960px) {
 .grid {
  column-count: 3;
 }
}

@media screen and (max-width: 600px) {
 .grid {
  column-count: 2;
 }
}

@media screen and (max-width: 400px) {
 .grid {
  column-count: 1;
 }
}
</style>

<section class="grid">
  <div class="module">
   <p>
   <h2>1</h2>
   <p>TEXT SOBAT DISINI. <a href="URL SOBAT">KET. LINK SOBAT</a>
   </p>
  </div>
  <div class="module">
   <p>
   <h2>2</h2>
   <p>TEXT SOBAT DISINI. <a href="URL SOBAT">KET. LINK SOBAT</a>
   </p>
  </div>
  <div class="module">
   <p>
   <h2>3</h2>
   <p>TEXT SOBAT DISINI. <a href="URL SOBAT">KET. LINK SOBAT</a>
   </p>
  </div>
  <div class="module">
   <p>
   <h2>4</h2>
   <p>TEXT SOBAT DISINI. <a href="URL SOBAT">KET. LINK SOBAT</a>
   </p>
  </div>
  <div class="module">
   <p>
   <h2>5</h2>
   <p>TEXT SOBAT DISINI. <a href="URL SOBAT">KET. LINK SOBAT</a>
   </p>
  </div>
  <div class="module">
   <p>
   <h2>6</h2>
   <p>TEXT SOBAT DISINI. <a href="URL SOBAT">KET. LINK SOBAT</a>
   </p>
  </div>
  <div class="module">
   <p>
   <h2>7</h2>
   <p>TEXT SOBAT DISINI. <a href="URL SOBAT">KET. LINK SOBAT</a>
   </p>
  </div>
  <div class="module">
   <p>
   <h2>8</h2>
   <p>TEXT SOBAT DISINI. <a href="URL SOBAT">KET. LINK SOBAT</a>
   </p>
  </div>
  <div class="module">
   <p>
   <h2>9</h2>
   <p>TEXT SOBAT DISINI. <a href="URL SOBAT">KET. LINK SOBAT</a>
   
   
   </p>
  </div>
 </section>

Note :
Silakan diedit lagi untuk penyesuaian dengan blog sobat.