Saran: Membuat Template Model Grid Lebih Baik Menggunakan display:flex

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

Kelebihannya display:flex ialah tidak perlu lagi menambahkan property height pada selector yang sama. Sehingga jika 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 membuat style grid menggunakan kode seperti ini:

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

Jika menggunakan display:flex maka kurang lebih cara penerapannya menjadi seperti 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, sebetulnya 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!

Baca Juga: