Cara Menciptakan Halaman Grid Dengan Css

Cara Membuat Halaman Grid Dengan CSS Grid atau Galery merupakan tampilan yang menyusun beberapa colums. Seperti yang sudah aku ulas sebelumnya membuat tampilan homepage static menjadi Grid kali ini pun sama masih mengulas tampilan Grid namun tidak pada homepage namun pada halaman postingan.

Demo   CODE

Untuk menciptakannya memakai properti CSS, maka dengan demikina Anda dapat dengan m,udah mengubah pada tampilan halaman. Anda penasaran, berikut ini selengkapnya :

Silahkan Anda buka Editor Template, kemusian Anda cari kode  ]]></b:skin> , kemudian Anda salin copy aba-aba dibawah ini dan pastekan diatasnya.

 margin: 0;
  padding: 0;
}
aak{
  font-family: 'Oswald', sans-serif;
  background-color: rgb(225,236,231);
}
aak{
  line-height: 70px;
  background-color: rgb(26,32,44);
  color: rgb(225,236,231);
  padding: 0 70px;
}
h1{
  display: inline-block;
}
span{
  padding: 0 10px;
  font-size: .7em;
  color: rgb(130,130,130);
}
a{
  color: rgb(130,130,130);
  text-decoration: none;
  transition: all .3s;
}
a:hover{
  color: rgb(190,190,190);
}
section{
  padding: 40px;
}
.wrap{
  -webkit-columns: 300px;
     -moz-columns: 300px;
          columns: 300px;
  -webkit-column-gap: 40px;
     -moz-column-gap: 40px;
          column-gap: 40px;
}
h2{
  padding: 10px 30px;
  font-weight: normal;
  color: rgb(26,32,44);
}
h3{
  color: rgb(130,130,130);
  margin-bottom: .4em;
  font-weight: normal;
}
p+p{
  margin-top: .7em;
}
article{
  padding: 30px;
  background-color: rgb(255,255,255);
  -webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}
article+article{
  margin: 20px 0;
}

Selanjutnya pemasangan aba-aba HTML, Anda menuju Entri gres kemudian salin aba-aba dibawah ini dan pasangakan pada Mode HTML.

<div class="aak">
<div class="wrap">
<article>
<h3>
Tuliskan Judul Artikel</h3>

Tuliskan isi Artikel didini

</article>
<article>
<h3>
Tuliskan Judul Artikel</h3>

Tuliskan isi Artikel didini

</article>
<article>
<h3>
Tuliskan Judul Artikel</h3>

Tuliskan isi Artikel didini

</article>
<article>
<h3>
Tuliskan Judul Artikel</h3>

Tuliskan isi Artikel didini

</article>
<article>
<h3>
Tuliskan Judul Artikel</h3>

Tuliskan isi Artikel didini

</article>
<article>
<h3>
Tuliskan Judul Artikel</h3>

Tuliskan isi Artikel didini

</article>
<article>
<h3>
Tuliskan Judul Artikel</h3>

Tuliskan isi Artikel didini

</article>
<article>
<h3>
Tuliskan Judul Artikel</h3>

Tuliskan isi Artikel didini

</article>
<article>
<h3>
Tuliskan Judul Artikel</h3>

Tuliskan isi Artikel didini

</article>
<article>
<h3>
Tuliskan Judul Artikel</h3>

Tuliskan isi Artikel didini

</article>
<article>
<h3>
Tuliskan Judul Artikel</h3>

Tuliskan isi Artikel didini

</article>
<article>
<h3>
Tuliskan Judul Artikel</h3>

Tuliskan isi Artikel didini

</article>
<article>
<h3>
Tuliskan Judul Artikel</h3>

Tuliskan isi Artikel didini

</article>
<article>
<h3>
Tuliskan Judul Artikel</h3>

Tuliskan isi Artikel didini

</article>
</div>
</div>

Semoga bermanfaat!


Sumber http://www.websiteedukasi.com/