Tutorial Mudah Membuat Grid HTML dan CSS

Tutorial Mudah Membuat Grid HTML dan CSS ItoLink - Selamat datang kembali bersama saya admin ItoLink. Banyak yang merequest bagaimana cara membuat tampilan grid dengan kode HTML di website maupun blog kepada saya. Tampilan yang kotak-kotak sangat menarik dimana website kita akan terlihat rapih dan modern. Selain itu dengan menerapkan grid di halaman depan sebuah website katakanlah postingan dapat mengurangi space kosong juga.

Banyak sekali agan-agan blogger yang bertanya kepada saya "gimana sih buat grid??". Membuat grid dengan HTML dan CSS tidak sesulit menyatakan cinta kok, hanya saja kamu harus paham beberapa dasar-dasarnya kodenya saja. Dan pada kesempatan kali ini ItoLink akan mengajarkan caranya.

Tutorial Grid ini cocok untuk kamu yang sama sekali tidak menguasai pemograman web dan mempunyai kemauan keras untuk belajar.

Catatan:
-Pada kali ini saya hanya akan menjelaskan tutorial membuatnya saja tidak langsung menuju ke cara membuat postingan grid, jadi belajarlah dari dasar jangan mau langsung tempel saja oke??

Membuat Grid dengan Floating

Tutorial yang pertama adalah membuat Grid dengan memanfaatkan CSS Floating. Saya peragakan menggunakan istilah Mangkok dan Baso agar kamu lebih mudah memahaminya.
Sebelum mulai, buatlah 1 folder dengan didalamnya 2 file bernama index.html

1. Mari kita mulai dengan membuat tag div dengan attribute id "grid" seperti berikut:

<div id='grid-container'> <!-- isi konten --> </div>
2. Selanjutnya kita isi konten di dalam kodenya dengan kode seperti di bawah ini(kita akan membuat 4 dengan class item dan content berserta isiniya):
<div id='grid-container'> <div class='item'> <div class='content'> <p>TEXT</p> </div> </div> <div class='item'> <div class='content'> <p>TEXT</p> </div> </div> <div class='item'> <div class='content'> <p>TEXT</p> </div> </div> <div class='item'> <div class='content'> <p>TEXT</p> </div> </div> </div>
3. karena kita menggunakan floating, untuk grid cssnya kita atur seperti ini:
<style> #grid-container{ float:left; width:100%; border: 2px solid #000; max-width:300px; } .item { float:left; width:50%; box-sizing:border-box; padding: 5px; } .content { background:#000; box-sizing:border-box; color:#fff; float:left; width:100%; height:150px; } </style>
Penjelasan:
- Pada #grid-container saya kenapa saya kasih float ? karena kita menggunakan metode floating grid untuk sekarang
- Pada kode css, float berguna agar elemen kita bisa atur rata kanan atau kirinya. pada css diatas kita atur dengan nilai "left" yang berarti elemen grid tersebut akan rata kiri.

- Selanjutnya pada css kita juga kita juga menambahkan panjang /width yang kita atur dengan nilai 50%. Ini artinya elemen yang di beri class "item" panjangnya akan 50% atau setengah dari panjang grid containernya.

- Selain float dan width kita juga menambahkan "box-sizing" dengan nilai "border-box". ini berperan agar saat kita menambahkan padding, panjang kontennya tidak berubah atau bertambah.

Berikut hasil akhirnya sepertii di bawah ini:

TEXT
TEXT
TEXT
TEXT


Catatan :
- Untuk tampilan grid , mengatur width atau panjang isi konten grid adalah hal yang penting agar tampilan yang dihasilkan  rapih dan simetris.

- Untuk mengatur jumlah gridnya, kamu bisa menggunakan referensi panjang yang harus diatur dengan nilai berikut:

width: 50% == 2 grid
width: 33.33% == 3 grid
width: 25% == 4 grid
width: 20% == 5 grid
width: 16.66%== 6 grid

Cukup mudah bukan? Itulah cara membuat grid dengan memanfaatkan css float yang bisa kamu jadikan bahan latihan membuat grid di website atau blog kamu. Walaupun tutorialnya mudah disini belum tentu kamu bisa mengimplementasikannya. Perlu latihan dan pemahaman kode CSS secara berulang agar tau cara kerja sistem grid menggunakan css float ini.

Membuat grid menggunakan floating ada kekurangannya. Kekurangan inilah yang perlu kita perhatikan agar saat menerapkannya kesitus kita tidak terjadi. Berikut kekurangan Grid css menggunakan floating:


Kekurangan menggunakan Grid Floating:

1. Jika tinggi kontennya berbeda di setiap item gridnya maka pada baris selanjutnya tampilannya tidak akan rapih alias acak-acakan
2. Element container yang memiliki elemen turunan floating harus menggunakan float juga supaya tidak kehilangan tinggi elemen. (solusinya bisa menggunakan css clearfix. baca disini!)
3. Jika kita ingin membuat item gridnya ketengah harus di atur setiap margin kiri kanannya.

Walaupun ada kekurangannya, menggunakan floating juga ada kelebihannya sebagai berikut:

1. Support semua browser.
2. Cukup mudah digunakan untuk inline styling
3. Tidak harus selalu menggunakan container (atau Induk/parent)

Membuat Grid di CSS selain menggunakan floating, ada juga metode yang lebih modern. salah satunya menggunakan metode Flexbox atau biasa di sebut CSS Flex. Untuk tutorialnya bisa melangkah ke materi Grid sebagai berikut:

Grid Tutorial part 2 : Membuat Grid dengan CSS Flexbox

Itulah penjelasan sekaligur tutor yang bisa saya bagikan saat ini semoga bermanfaat bagi semuanya yang ingin belajar. Ilmu pemograman yang saya share disini adalah ilmu dari pengalaman saya belajar pemograman website. Jadi jika ada kesalahan cara ataupun perbedaan pendapat mohon cantumkan di komentar.

Jangan lupa untuk share tutorial membuat grid ini ke teman-teman kamu atau bisa kamu bookmark dan subscribe via email dibawah artikel berikut. Nantikan tutorial atau template dari ItoLink selanjutnya!

Facebook twitter Google+

Related Post

Berlangganan update artikel terbaru via email:

2 Komentar

  1. Ini tutornya hanya menyediakan tentang lebar grid saja, kalo setting tinggi nya gimana?

    ReplyDelete
    Replies
    1. dalam grid tinggi elemennya relative, bisa sesuai dengan banyaknya konten atau di set statis di cssnya. lebih baik untuk tingginya menyesuaikan konten saja supaya tidak usah set berulang"

      Delete