Saran: Menciptakan Template Model Grid Lebih Baik Memakai Display:Flex

Untuk menciptakan template style grid, sangat disarankan untuk memakai property dan value display:flex pada selectornya. Dibandingkan memakai yang lainnya, menyerupai display:block, display:inline-block ataupun display:grid.

Kelebihannya display:flex adalah tidak perlu lagi menambahkan property height pada selector yang sama. Sehingga jikalau dalam satu baris grid yang sama terdapat tampilan bidang yang berbeda tingginya, maka bidang yang lainnya akan mengikuti bidang yang paling tinggi diantaranya.

Contoh,
Biasanya untuk menciptakan style grid memakai aba-aba menyerupai ini:

.post {display:inline-block; float:left; height:450px; margin-right:4%; width:calc(50% - 4%)}

Jika memakai display:flex maka kurang lebih cara penerapannya menjadi menyerupai ini:

#main-wrapper .blog-posts {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap: wrap;}
.post { float:left; margin-right:4%; width:calc(50% - 4%)}

Perhatian:

• Untuk menambahkan property dan value display:flex dan kawan-kawannya, sesungguhnya diletakkan pada selector terluar dari .post
• Jika selectornya berbeda dari yang di atas, tinggal sesuaikan saja.

Kalau ingin mengembalikan ke tampilan full lagi pada media query tertentu, tinggal giniin aja:

.post { float:none; margin:0 auto; width:100%}

Demikian,

Selamat mencoba!

Bagikan Artikel ini