Tutorial Layouting : Membuat Grid Sama Tinggi Oleh: Christian Rosandhy

Salah satu masalah umum penggunaan Grid itu adalah mengatur tingginya biar rapi. Untuk bisa membuat grid yang benar-benar rapi dan sama tinggi, tentunya ada teknik-tekniknya yang simpel.. Disimak aja gih~ :D

Salam, sobat jagocoding.. masih di hari yang sama saya mau share tentang teknik layouting CSS lagi.. Teknik layouting yang akan kita bahas adalah tentang Grid. Tentunya kita yang suka pake bootstrap nggak asing lagi dong ya, dan dalam penggunaan grid itu sendiri kadang ada beberapa tantangan berupa hasil yang nggak sesuai seperti yang kita inginkan. Salah satunya seperti ini:

Ada yang pernah gridnya model seperti itu? Ya, itulah salah satu masalah kacrut ketika berurusan dengan grid.. Karena itu, kali ini saya akan share 3 teknik layouting untuk membuat grid menjadi sama tinggi. Cekidot~

Teknik 1 : Fix Height Pertama-tama salin dulu script HTML ini, (jangan lupa download bootstrapnya juga) <meta charset="UTF-8">

Dari nama tekniknya sendiri kayaknya udah cukup jelas lah ya, Fix Height itu artinya teknik memberikan nilai tinggi yang sama pada masing-masing konten grid. CSSnya begini ~ *{margin:0px auto;}

#wrapper{padding:20px;} /*teknik 1 : fix height*/ .txt{ height:180px; /*atur angkanya sampe dirasa udah pas*/ background:#C73B2F; padding:10px; color:#fff;} Selesai. Hasilnya jadi begini deh :

Kelebihan teknik ini cuma satu, SIMPEL. Sayangnya teknik satu ini sifatnya bener-bener statis. Jadi kalo suatu saat konten didalam akan bertambah lagi, ya CSSnya harus kita ubah lagi.. Maka dari itu, teknik fix height ini sangat nggak disarankan untuk dipake ke konten yg dinamis.

Teknik 2 : Display Flex Seperti yang pernah saya bilang di tutorial saya dulu tentang macam-macam display ( http://jagocoding.com/tutorial/607/Tutorial_Lengkap_Memahami_CSS_Display), Display : Flex adalah salah satu display yang sangat powerful. Kita bisa bikin layout yang benar-benar rapi dan mudah dengan display flex ini. Buat liatnya, lanjutin lagi HTML kita di bagian yg udah ditandain tadi ~

---

Teknik 2 : Display Flex

Oiya,, untuk display flex ini salah satu keunggulannya udah keliatan dari HTMLnya,, nggak perlu pake Bootstrap. Asalkan deklarasi di CSSnya bener, hasil akhirnya nanti benar-benar rapi kok biarpun nggak pake grid.. CSSnya gini nih~ /*teknik 2 : display flex*/ .flex{ display:flex; /*Deklarasi display flex + antek2nya*/ -moz-display:flex; -webkit-display:flex; -khtml-display:flex; -o-display:flex; justify-content:space-between;} /*auto margin antar konten didalamnya*/ .flex .isi{ width:30%; /*lebarnya terserah, dikira-kira aja*/ background:#ffbb27; margin:10px; padding:10px;} Hasilnya begini nih~

Gimana? Nggak kalah rapi juga kan dengan teknik 1 tadi? Bahkan nggak kalah simpel juga.. Konsepnya sih cuma display:flex aja, yang bikin panjang cuma nambahin prefix2nya aja.. Tapi biarpun begitu, teknik flex ini juga punya kelemahan.. Yups, berhubung display:flex itu punyanya CSS3, artinya ya browser-browser jadul nggak akan support, dan menganggap sebagai display:block biasa. Keren, tapi rada miris ya.. Tapi kalo emang suka banget sama CSS3, atau target website kita bukan untuk Internet Explorer browser tua sih ya nggak apa-apa, itung-itung buat belajar kan? :D Last teknik nih ~

Teknik 3 : Tricky Margin Cihuyy,, teknik ketiga ini cukup umum dipake, biarpun tricky tapi asik kok.. balik ke HTML lagi ye~

---

Teknik 3 : Tricky Margin

Nah,, di teknik tricky margin ini langkah pertamanya adalah menyisipkan class tambahan di class row. Class tersebut yang menandakan bahwa 1 baris kesampinglah yang akan kita rapikan. Simak CSSnya~ /*teknik 3 : tricky margin*/ .equal{ position:relative; overflow:hidden; } .equal .content{ background:#68B200; padding:10px; position:relative; margin-bottom:-9989px; /*KUNCI UTAMA TRIKNYA NIH*/ padding-bottom:9999px;} Jadi lah seperti ini~

Yak,, tetap dengan hasil yang nggak kalah rapi dengan teknik-teknik sebelumnya. Teknik tricky margin ini cara kerjanya adalah dengan memberikan nilai padding pada masing-masing grid yang sangat besar (9999px), akan tetapi diimbangi juga dengan margin yang sangat minus (-9999px), sehingga dari segi posisi ga ada yang berubah. Setelah itu, di layer row utamanya diberikan

overflow:hidden; supaya kelebihan sekian ribu pixelnya yang bakalan muncul jadi ga kelihatan. Cukup tricky, tapi trik ini aman kok di browser-browser pada umumnya. Dari segi fleksibilitas juga nggak kalah dinamis dengan teknik no 2 tadi.. Kalaupun ada kelemahannya, paling cuma satu dan agak minor.. Coba aja di class .content tadi dikasi tambahan border-radius:20px; terus liat apa yg terjadi~

Nah, yang akan terjadi ya seperti gambar diatas ini,, Karena teknik ini sifatnya menyembunyikan pixel-pixel yang kelebihan, maka bagian bawah yang pengennya kita kasi border-radius jadi nggak kelihatan juga.. Pun kita maksa pengen kasi border radius di grid itu, ya bisa-bisa aja sih, bikin pake CSS pseudo-element ::after aja kali.. :v

Sekian teknik-teknik manipulasi tinggi grid yang bisa saya share kali ini.. Diantara ketiga teknik diatas sih yang paling saya saranin ya yang no 3 itu, tapi teknik lainnya juga boleh2 aja kok.. Makasih buat perhatiannya, CMIIW..

Tentang Penulis Christian Rosandhy