cara membuat tabel kolom responsive

Cara membuat tabel kolom dalam postingan yang responsive artinya kolom menyesuaikan media yang membuka web anda baik hp komputer dll

Tabel Kolom untuk di postingan , tabel kolom untuk membuat artikel di blog website ini ada 3 baris berjajar dan total semua 9 kolom

Contoh tabel kolom responsive seperti di bawah ini 

1

Blogger wonogiri. CONTOH KET. LINK

2

Blogger wonogiri. CONTOH KET. LINK

3

Blogger wonogiri CONTOH KET. LINK

4

Blogger wonogiri CONTOH KET. LINK

5

Blogger wonogiri CONTOH KET. LINK

6

Blogger wonogiri CONTOH KET. LINK

7

Blogger wonogiri CONTOH KET. LINK

8

Blogger wonogiri. CONTOH KET. LINK

9

Blogger wonogiri. CONTOH KET. LINK

jika yang anda cari kolom seperti di atas silahkan simak kodenya di bawah ini 

<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>Blogger wonogiri. <a href="https://jatisronopule.blogspot.com/2014/10/jasa-ganti-domain.html">CONTOH KET. LINK </a>
   </p>
  </div>
  <div class="module">
   <p>
   <h2>2</h2>
   <p>Blogger wonogiri. <a href="#">CONTOH KET. LINK </a>
   </p>
  </div>
  <div class="module">
   <p>
   <h2>3</h2>
   <p>Blogger wonogiri <a href="#">CONTOH KET. LINK </a>
   </p>
  </div>
  <div class="module">
   <p>
   <h2>4</h2>
   <p>Blogger wonogiri <a href="#">CONTOH KET. LINK </a>
   </p>
  </div>
  <div class="module">
   <p>
   <h2>5</h2>
   <p>Blogger wonogiri <a href="#">CONTOH KET. LINK </a>
   </p>
  </div>
  <div class="module">
   <p>
   <h2>6</h2>
   <p>Blogger wonogiri <a href="#">CONTOH KET. LINK </a>
   </p>
  </div>
  <div class="module">
   <p>
   <h2>7</h2>
   <p>Blogger wonogiri <a href="#">CONTOH KET. LINK </a>
   </p>
  </div>
  <div class="module">
   <p>
   <h2>8</h2>
   <p>Blogger wonogiri. <a href="#">CONTOH KET. LINK </a>
   </p>
  </div>
  <div class="module">
   <p>
   <h2>9</h2>
   <p>Blogger wonogiri. <a href="#">CONTOH KET. LINK </a>
 
 
   </p>
  </div>
 </section>

Keterangan : 

Tulisan Blogger wonogiri adalah deskripsi nya , anda bisa merubahnya

KET LINK adalah penjelasan dari link tersebut , anda bisa merubahnya

Jadi anda bisa mengganti deskripsi serta link dan keterangan link nya.

Cara penggunaanya kopi kode diatas dan pastekan dalam postingan anda , ingat posisi postingan pada tampilan html ya bukan compose