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

Tutorial Layouting : Membuat Grid Sama Tinggi

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:

 Contoh Grid Nggak Rapi

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>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Membuat Grid sama tinggi</title>
	<link rel="stylesheet" href="bootstrap.min.css">
	<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
	<div class="container">
		<h1 align="center">Membuat Grid Sama Tinggi</h1>

		<hr>
		<h2>Teknik 1 : Fix Height</h2>
		<div class="row">
			<div class="col-sm-4">
				<div class="txt">
					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>
			<div class="col-sm-4">
				<div class="txt">
					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>
			<div class="col-sm-4">
				<div class="txt">
					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>
		
		<!--KASI JARAK DISINI-->
		<!--TEKNIK SELANJUTNYA DIBAHAS DISINI~-->


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

*{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 : 

Teknik 1 : Fix Height

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">
	<div class="isi">
		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>
	<div class="isi">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. 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>
	<div class="isi">
		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>

<!--KASI JARAK LAGI BUAT NEXT TEKNIK-->

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~

Teknik 2 : Display Flex

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">
	<div class="col-sm-4">
		<div class="content">
		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>
	<div class="col-sm-4">
		<div class="content">
		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>
	</div>
	<div class="col-sm-4">
		<div class="content">
		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~

Teknik 3 : Tricky Margin

 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~

 Teknik 3 Minor Disadvantage

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


About Author

Christian Rosandhy

Saya adalah seorang penggemar komputer, terutama di bagian CSS atau PHP.. sekalipun saya belum jago-jago amat, setidaknya sekarang saya sedang berusaha belajar sebanyak-banyaknya.


Comment & Discussions

    Please LOGIN before if you want to give the comment.