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.

Membuat Kolom Responsive dengan CSS

Membuat Kolom Responsive dengan CSS

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.

Berlangganan update artikel terbaru via email:

34 Responses to "Membuat Kolom Responsive dengan CSS"

  1. Replies
    1. sama2 gan terimakasih kembali atas kunjungannya.

      Delete
  2. Wah mantap sob tutorialnya... makasih udah berbagi :)

    ReplyDelete
  3. berkunjung siang, selamat berkarya ya kawan dan sukses selalu

    ReplyDelete
  4. mantep klomnya keren mas, terimakasih udah berbagi tutorialnya

    ReplyDelete
  5. waduhh saya terlambat .. ngantuk soalnya hahaha..
    selamat sore , yang lagi sibuk semoga sukses hoho :) .

    ReplyDelete
    Replies
    1. hehheh bisa aja ni, makanya ngopi hhhehhehehhe, thank miz kunjungannya

      Delete
  6. jadi dapat tutor yg keren nih mas...
    trims ya udah sharing :)

    ReplyDelete
    Replies
    1. sama2 mas terimakasih kembali atas kunjungannya

      Delete
    2. Setuju Mas Budi,saya juga banyak belajar dari blog ini,Tutornya mudah dipahami Mas

      Delete
  7. Tutorial nya keren-keren. cocok dijadikan referensi ngeblog.

    ReplyDelete
    Replies
    1. bisa aja ni mas, terimakasih sudah berkunjung

      Delete
  8. berkunjung di malam minggu sambil baca tutor terbaru kang,,, jgn lp kopi di sruput nnti keburu dingin :D

    ReplyDelete
  9. wah..tips disini keren keren kang..mkasih sudah berbagi ya !!

    ReplyDelete
    Replies
    1. sama2 mas, biasa aja ko sama seperti yang lain blog ini gak ada lebihnya. terimakasih atas kunjungannya

      Delete
  10. satu lagi tutorial keren mas, ternyata yg ini mudah bisa dipasang di widget, sy kira dipasang di edit html, izin copas ya mas, terima kasih

    ReplyDelete
  11. sip sob, tutorial nya sangat bagus, terima kasih sudah berbagi sob... :-d

    ReplyDelete
  12. keren2..! thx sdh dishare *smile

    ReplyDelete
  13. aku duduk manis menyimak saja ya kawan :-)

    ReplyDelete
  14. wah ni mantap artikelnya gan... thanks ya da share ^_^
    salam cupux-movie " download film terupdate tinggal klik lnagsung download "

    ReplyDelete
  15. sangat mantap dan keren sobat..)
    terima kasih infonya

    ReplyDelete
  16. Terima kasih, Penerapan Responsive design lagi marak baru-baru ini.

    ReplyDelete
  17. Jujur.. baru kali ini saya membaca artikel seperti ini.. sangat dibutuhkan bagi pemula seperti saya dalam mengelola blog menuju yang lebih baik...
    terima kasih..

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami Alexjoen

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel