Tutorial Layouting : Membuat Grid Sama Tinggi

(1)

(2)

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) <!doctype html>

<title>Membuat Grid sama tinggi</title>

(3)

</head> <body>

<h1 align="center">Membuat Grid Sama Tinggi</h1> <hr>

<h2>Teknik 1 : Fix Height</h2> <div class="row">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, nisi, adipisci sunt nemo repellat consequuntur natus adipisci sunt nemo repellat consequuntur natus

deserunt mollitia officia unde aliquid sint inventore voluptaci sunt nemo repellat consequuntur natus deserunt mollitia officia unde aliquid sint inventore voluptate fugiat reiciendis ullam cumque voluptatem illum! </div>

</div>

Lorem ipsum dolor sit amet,

consectetur adipisicing pariatur, cupiditate et dolores debitis laudantium possimus itaque incidunt error nesciunt ipsum ad dolore quibusdam. Ducimus, fugit.

</div> </div>

Lorem ipsum dolor sit amet,

consectetur adipisicing elit. Perferendis, recusandae, rem, consequuntur, sequi obcaecati cum distinctio assumenda aut omnis voluptatibus animi cupiditate delectus minus ab numquam reprehenderit asperiores nulla nihil? </div>

</div> </div>

</div> </div>

</body> </html>

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 ~

(4)

#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 ~

<hr>

<h2>Teknik 2 : Display Flex</h2> <div class="flex">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, mollitia, earum, vero nostrum a alias laudantium commodi temporibus dolorem nisi quam quasi incidunt id molestias nesciunt veritatis ratione. Sit, eos.

</div>

(5)

Numquam, ut quo voluptatibus obcaecati deserunt consectetur veritatis minima dolorem odio porro d. Numquam, ut quo voluptatibus obcaecati deserunt consectetur veritatis minima dolorem odio porro delectus voluptatum vitae ea. Ducimus, sequi quam corrupti aperiam velit! </div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, vel, deleniti, criosam eum laudantium amet incidunt cumque accusamus sapiente ducimus ea quod praesentium.

</div> </div>

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~

(6)

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~ <hr>

<h2>Teknik 3 : Tricky Margin</h2> <div class="row equal">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, iure, quos aut voluptates cum aliquam hic blanditiis deserunt! Nemo, molestias iure nobis paria.

</div> </div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, deleniti, molestias, amet, pariatur libero tempora nulla non soluta repudiandae eveniet rem at ea veniam cumque maxime eaque qui eligendi officiis at ea veniam cumque maxime eaque qui eligendi officiis? </div>

(7)

</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, molestias, molestiae, reiciendis, omnis necessitatibus a nihil

mollitia pariatur nemo reprehenderit repellendus similique dolores tempora. Velit debitis amet saepe laboriosam voluptatum.

</div> </div>

</div>

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

(8)

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..

Tutorial Layouting : Membuat Grid Sama Tinggi