responsive-grid

Tips kali ini saya akan membuat Full Width Grid Galeri tanpa Framework CSS.

HTML

CSS

saya akan menggunakan properti css3 width: calc() properti ini berfungsi untuk grid galeri yang akan kita buat.

sedikit penjelasan mengenai properti calc() properti ini berfungsi untuk melakukan perhitungan nilai properti, sebagai contoh, width: calc(210px – 100px) maksudnya adalah setiap element yang diberi properti width tersebut akan dikurang 100 pixel. Biasanya nilai properti yang digunakan berupa persentase.

Mudah bukan 🙂

Di bawah ini adalah tampilan yang telah kita buat tadi

 

See the Pen Responsive Full Width Grids Gallery by Lufti Nurfahmi (@luftinur) on CodePen.0

 

 

 

 

Comments