Tips Membuat Tampilan Grid yang Rapih di Website/Blog

Tips Membuat Tampilan Grid yang Rapih di Website/Blog

Codepelajar - Banyak sekali tutorial yang menyediakan bagaimana cara membuat grid di homepage atau dibagian lainnya sebuah situs. Mulai dengan Bootstrap, Foundation, atau sobat membuat sendiri dari nol. Dengan tampilan dengan berbagai kotak-kotak kartu yang tersusun rapih membuat situs blog sobat terlihat rapih dan juga lebih profesional.

Nah bagi sobat yang ingin membuat atau mengubah tampilan halaman depan website sobat dengan tampilan grid, kali ini saya akan berbagi tips bagaimana menyusun tampilan grid yang powerfull, dan tersusun rapih. Namun kali ini saya tidak akan mengajarkan coding secara langsung. Pada artikel ini saya hanya berbagi tips supaya agan terbentuk jiwa dan prinsip desain yang efisien.

Membuat tampilan grid dan responsive, kita perlu beberapa persiapan dan peninjauan juga pada tema/template yang sobat pakai. Kita tidak bisa serta merta langsung mengatur css sedemikian rupa dengan banyak menambahkan elemen-elemen dengan nilai statis, karena hal ini sangat tidak baik bagi kode yang dibuat pada desain situs sobat. Ada aturan dan pantangan serta ketentuan yang arus agan pahami supaya mendesain website sobat menjadi lebih rapih dan efisien.

Prinsip Dasar Desain Grid pada Website

Prinsip dasar ini saya pelajari sendiri dan praktekan sendiri sesuai pengalaman saya sebagai web frontend developer. Berikut ini prinsip dasar yang harus sobat ketahui

Gunakan Flex Box untuk Grid yang Memiliki banyak Item

Flex box adalah teknologi dari CSS 3 yang memungkinkan kita mengatur elemen Grid, dengan rapih dan teratur. Kelebihan flex box ini adalah konten yang diatur akan menyesuaikan tingginya sesuai item yang paling tinggi kontennya sesuai barisnya. Salah satu css library yang terkenal menggunakan Flex box adalah Bootstrap. Kenapa saya menyarankan menggunakan Flexbox daripada Float untuk item grid yang banyak? Gambarannnya seperti ini.

Tips Membuat Tampilan Grid yang Rapih di Website/Blog

Jika kita menggunakan flexbox, maka jika ada konten yang tingginya lebih, maka barisnya pun akan menyesuaikan sehingga kita tidak perlu mengatus sedemikian rupa agar barisnya tertata rapih. Sedangkan jika kita memakai float, saat ada konten dengan tinggi berbeda sedikitpun maka barisnya tidak akan berubah, tetapi item gridnya yang akan berusaha menghindari tumbrukan konten dengan konten yang melebihi tadi. Contoh pemakaian flex box pada CSS

.row {
 width:100%;
 display:flex;
 flex-wrap:wrap;
}
.columns {
 width:33.333%;
}

Dan Kode HTMLnya seperti berikut harus seperti berikut:

<div class='row'>
<div class='columns'>
<!-- isi konten disini--->
</div>
</div>

.row disini sebagai baris wadah (wrapper) untuk flex item dan .columns sebagai itemnya

Kurangi pemakaian nilai statis pada CSS GRID

Saat saya mencari referensi seperti situs blog lokal atau desain template blog lokal yang menerapkan tampilan grid pada homepagenya, saya selalu saja menemukan kalau grid yang di buat menggunakan nilai statis terutama di bagian Width CSS GRIDnya. Masih kurang paham? Gambar di bawah ini akan menjelaskan gambaran yang baik dan benarnya.

Tips Membuat Tampilan Grid yang Rapih di Website/Blog

Nilai statis (dalam contoh PX adalah satuan nilai statisnya) memang bisa mengatasi masalah saat elemen grid yang kita buat tidak sesuai pada Width dan Height saat kita ingin membuat grid. Namun pemberian nilai statis ini hanya akan memberikan masalah pada saat situs kita ingin dibuat responsive. Sebab kita harus mengatur kembali Media Query setiap layar di CSS agar bisa selalu menyesuaikan dengan layar device. Saran saya jangan gunakan nilai statis seperti pengggunaan PX ini. Lebih baik menggunakan persen (%) untuk mengatur css gridnya supaya item grid bisa menyesuaikan dan lebih mudah juga saat kita mengatur Media Query-nya. Contoh betapa repotnya kita jika membuat grid dengan nilai statis


GRID dengan nilai Width yang statis

Contoh kali ini anggap saja jika sobat ingin membuat grid yang dibagi menjadi 3

.grid-item {
 width:400px; /*== default ==*/ 
}
@media (max-width:1024px){
 width:341px;
}
@media (max-width:991px){
 width:330px;
}
@media (max-width:768px){
 width:256px;
}
@media (max-width:640px){
 width:320px; /*== pada layar tablet mini grid item jadi terbagi 2 ==*/
}
@media (max-width:525px){
 width:262px;
}
@media (max-width:480px){
 width:240px;
}
/*== dan seterusnya ==*/

GRID dengan nilai width dinamis menggunakan persen


.grid-item{
 width:33.33333%; /*== default bagi 3 ==*/
}
@media (max-width:640px){
 width:50%; /*== ukuran tablet mini menjadi 2 ==*/
}
@media (max-width:425px){
 width:100%; /*== ukuran ponsel jadi 1 *==/
}

Sangat terlihat perbedaan jika sobat mengaturnya dengan nilai dinamis yang memakai persen. Kita hanya perlu mengetaui pada persen ke berapa supaya item grid bisa terbagi menjadi 4 ,3, dan 2. Ini seperti menghitung bagaimana 100/4 = 25 atau 100/3 = 33.33333 dan seterusnya.

Pada saat mengatur Width dengan nilai dinamis, di usahakan jangan sampai mengurangi nilai persennya karena akan mengacaukan susunan grid pada saat layar mengecil (responsive) Contoh grid yang kacau: width:30% saat bagi 3 padahal harusnya 100:3 = 33.33333% atau width:21% saat bagi 4 padahal harusnya 100:4 = 25% Angka hasil bagi inilah yang menentukan rapih tidaknya grid yang sobat buat nantinya.

Jangan Gunakan Margin untuk Jarak Grid Item

Pada tulisan diatas, barusnya hanya mengetahui bagaimana cara membagi item grid dengan rapih dan tersusun. Jadi belum ada pemisah antara kontennya. Nah disini saran saya jangan menggunakan Margin pada CSS-nya. Sebab Margin akan menambah ukuran dari nilai dinamis tadi. Gambarannya seperti berikut.

Tips Membuat Tampilan Grid yang Rapih di Website/Blog

Karena pertambahan nilai yang di sebabkan Margin, maka konten yang terakhir pun menjadi pindah kebawah karena kelebihan nilai dinamisnya. Lalu bagaimana cara membuat jarak grid yang benar? Kita bisa melihat trik yang di gunakan Boostrap yakni menggunaan Inner Content dan Padding sebagai pemisahnya.

Tips Membuat Tampilan Grid yang Rapih di Website/Blog

Kode HTML yang bisa sobat buat seperti ini:

<div class='row'>
<div class='columns'>
<div class='inner-content'>
<!-- isi konten disini -->
</div>
</div>
</div>

CSS yang bisa digunakan seperti berikut:

.row {
 width:100%;
 display:flex;
 flex-wrap:wrap;
 box-sizing:border-box;
}
.columns {
 width:33.333%;
 box-sizing:border-box;
}
.inner-content {
 width:100%;
 height:100%;/*== height ini opsional, sobat bisa set Auto jika ingin menyesuaikan dengan isi kontennya ==*/
}
Pada beberapa kasus, saat kita belajar html dari plain text, nilai padding juga bertambah mengisi panjang konten. Untuk mengatasinya beri properti box-sizing:border-box agar panjang kontennya tetap.

Jika kamu masih belum paham juga coba lihat halaman awal situs ini sebagai contohnya atau bisa mengunjungi situs berikut

Terpopuler : Cara Membuat Background Patrtikel di Blog

Demikian Prinsip dasar grid yang bisa terapkan saat membuat grid untuk tema blog /situs web yang kelola. Memang sedikit dan agak ribet juga soalnya ini harus praktek langsung. Setidaknya sobat dengan penjelasan saya di atas atas bisa mengerti dasar-dasar membuat grid yang baik dan benar serta tersusun rapih. Jika ada pertanyaan bisa tanyakan di komentar setelah artikel selesai. Nantikan tutorial dari Codepelajar selanjutnya.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel