{"id":3141,"date":"2025-05-11T07:15:48","date_gmt":"2025-05-11T07:15:48","guid":{"rendered":"https:\/\/www.apridesain.id\/blog\/?p=3141"},"modified":"2025-05-11T07:15:50","modified_gmt":"2025-05-11T07:15:50","slug":"grid-system","status":"publish","type":"post","link":"https:\/\/www.apridesain.id\/blog\/grid-system\/","title":{"rendered":"Mengenal Grid System di Desain Grafis dan Jenis-jenisnya"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Pernah dengar istilah <em>grid<\/em> <em>system <\/em>(sistem grid)?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Grid system merupakan salah satu metode yang terdapat dalam olah desain, seperti desain grafis.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Teman-teman dapat mengenali apa itu grid system secara menyeluruh di ulasan berikut ini, jadi baca sampai akhir ya!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Apa yang Dimaksud dengan Grid System?<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"739\" height=\"1024\" src=\"https:\/\/www.apridesain.id\/blog\/wp-content\/uploads\/2025\/05\/grid-system-739x1024.webp\" alt=\"grid system\" class=\"wp-image-3139\" srcset=\"https:\/\/www.apridesain.id\/blog\/wp-content\/uploads\/2025\/05\/grid-system-739x1024.webp 739w, https:\/\/www.apridesain.id\/blog\/wp-content\/uploads\/2025\/05\/grid-system-216x300.webp 216w, https:\/\/www.apridesain.id\/blog\/wp-content\/uploads\/2025\/05\/grid-system-768x1064.webp 768w, https:\/\/www.apridesain.id\/blog\/wp-content\/uploads\/2025\/05\/grid-system-1108x1536.webp 1108w, https:\/\/www.apridesain.id\/blog\/wp-content\/uploads\/2025\/05\/grid-system.webp 1200w\" sizes=\"auto, (max-width: 739px) 100vw, 739px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Pengertian grid system adalah sebuah <em>framework<\/em> (kerangka kerja) dari garis-garis vertikal dan horizontal untuk membuat <em>layout<\/em> (tata letak) desain yang terstruktur.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Baik itu untuk <a href=\"https:\/\/www.apridesain.id\/blog\/desain-grafis\/\"><strong>desain grafis<\/strong><\/a>, desain digital, desain cetak, hingga desain website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Baca juga: <\/strong><a href=\"https:\/\/www.apridesain.id\/blog\/apa-itu-dkv\/\"><strong>Pengertian DKV dan Kesempatan Karir Lulusannya<\/strong><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Manfaat Grid System<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Grid system ini sangat bermanfaat bagi para desainer seperti teman-teman untuk membuat struktur desain yang ciamik dan tertata rapi.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mengapa demikian?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hal ini didapat karena kita menggunakan elemen-elemen seperti <em>row<\/em> (baris), <em>column<\/em> (kolom), dan <em>margin<\/em> (batas pinggir).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Selain itu, desain yang teman-teman buat juga akan tampil lebih konsisten, ini penting untuk mendapatkan portofolio desain yang profesional.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Baca juga: <\/strong><a href=\"https:\/\/www.apridesain.id\/blog\/portofolio-desain-grafis\/\"><strong>Contoh Portofolio Desain Grafis dan Cara Membuatnya<\/strong><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Jenis-jenis Grid System<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ada beberapa jenis sistem grid yang perlu teman-teman ketahui yaitu:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Manuscript.<\/li>\n\n\n\n<li>Column.<\/li>\n\n\n\n<li>Modular.<\/li>\n\n\n\n<li>Hierarchical.<\/li>\n\n\n\n<li>Baseline.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Berikut penjelasan masing-masing jenisnya:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Manuscript Grid<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Manuscript grid tergolong sebagai grid yang sederhana, dengan jenis grid system ini teman-teman akan menempatkan teks dalam satu kolom, contohnya seperti pada halaman buku.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Manuscript grid digunakan pada:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Buku.<\/li>\n\n\n\n<li>Artikel panjang.<\/li>\n\n\n\n<li>Makalah akademis.<\/li>\n\n\n\n<li>Dan beberapa blog.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Column Grid<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Jenis grid yang paling umum digunakan oleh para desainer grafis dan desainer web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pada dasarnya, grid jenis ini merupakan susunan dari sejumlah kolom yang membantu Anda menempatkan dan menyelaraskan teks dan elemen desain lainnya.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Column grid digunakan pada:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Koran.<\/li>\n\n\n\n<li>Majalah<\/li>\n\n\n\n<li><em>Website<\/em> (situs web)<\/li>\n\n\n\n<li>Brosur<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Modular Grid<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Merupakan grid yang terdiri dari sejumlah column dan row yang menciptakan &#8220;modul&#8221;-nya sendiri.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Modular grid digunakan pada desain-desain yang kompleks seperti:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Koran.<\/li>\n\n\n\n<li>Kalender.<\/li>\n\n\n\n<li><em>Chart<\/em> (bagan).<\/li>\n\n\n\n<li>Dan beberapa website dengan tampilan yang rumit.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Hierarchical Grid<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Hierarchical grid adalah grid yang bentuknya tidak beraturan dan jenis grid ini paling fleksibel untuk kebutuhan desain konten.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Grid yang satu ini terbilang cukup unik karena dapat terdiri dari dua jenis grid yang digabungkan atau bahkan dapat dibentuk bebas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hierarchical grid digunakan pada:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Infografik.<\/li>\n\n\n\n<li>Poster.<\/li>\n\n\n\n<li>Beberapa tampilan aplikasi HP dan website.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Baseline Grid<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Merupakan grid garis horizontal seperti buku salinan sekolah, pixel grid yang sebagian besar digunakan untuk layar digital, hingga grid dengan beberapa row dan column yang menciptakan <em>pixel net<\/em> (jaring piksel).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Baseline grid ini adalah fondasi ketika teman-teman ingin membuat grid modular.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Baseline grid digunakan pada:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tata letak buku.<\/li>\n\n\n\n<li>Beberapa desain website.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Baca juga: <\/strong><a href=\"https:\/\/www.apridesain.id\/blog\/software-desain-logo\/\"><strong>Software Desain Logo yang Bisa Dicoba Gratis<\/strong><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Elemen Pada Sistem Grid<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Berdasarkan apa yang telah dijelaskan di atas, elemen pada sistem grid terbagi menjadi tiga, yaitu:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Column.<\/li>\n\n\n\n<li>Row.<\/li>\n\n\n\n<li>Margin dan Padding.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Sekarang kita akan coba lampirkan contoh-contohnya.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Baca juga: <\/strong><a href=\"https:\/\/www.apridesain.id\/blog\/beragam-gaya-desain-grafis\/\"><strong>Beragam <\/strong><strong><em>Style<\/em><\/strong><strong> (Gaya) Desain Grafis<\/strong><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Contoh Desain yang Menggunakan System Grid<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ingin tahu contoh desain yang dibuat menggunakan system grid? Silakan cek contohnya di bawah ini:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"432\" src=\"https:\/\/www.apridesain.id\/blog\/wp-content\/uploads\/2025\/05\/grid-system-behance-website-1024x432.webp\" alt=\"grid system behance website\" class=\"wp-image-3138\" srcset=\"https:\/\/www.apridesain.id\/blog\/wp-content\/uploads\/2025\/05\/grid-system-behance-website-1024x432.webp 1024w, https:\/\/www.apridesain.id\/blog\/wp-content\/uploads\/2025\/05\/grid-system-behance-website-300x127.webp 300w, https:\/\/www.apridesain.id\/blog\/wp-content\/uploads\/2025\/05\/grid-system-behance-website-768x324.webp 768w, https:\/\/www.apridesain.id\/blog\/wp-content\/uploads\/2025\/05\/grid-system-behance-website.webp 1349w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Grid system behance website<\/figcaption><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"471\" src=\"https:\/\/www.apridesain.id\/blog\/wp-content\/uploads\/2025\/05\/dribbble-website-grid-system-1024x471.webp\" alt=\"dribbble website grid system\" class=\"wp-image-3137\" srcset=\"https:\/\/www.apridesain.id\/blog\/wp-content\/uploads\/2025\/05\/dribbble-website-grid-system-1024x471.webp 1024w, https:\/\/www.apridesain.id\/blog\/wp-content\/uploads\/2025\/05\/dribbble-website-grid-system-300x138.webp 300w, https:\/\/www.apridesain.id\/blog\/wp-content\/uploads\/2025\/05\/dribbble-website-grid-system-768x354.webp 768w, https:\/\/www.apridesain.id\/blog\/wp-content\/uploads\/2025\/05\/dribbble-website-grid-system.webp 1301w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Dribbble website grid system<\/figcaption><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"585\" height=\"401\" src=\"https:\/\/www.apridesain.id\/blog\/wp-content\/uploads\/2025\/05\/sistem-grid-pada-majalah-pioneerprintinginc.webp\" alt=\"sistem grid pada majalah\" class=\"wp-image-3140\" srcset=\"https:\/\/www.apridesain.id\/blog\/wp-content\/uploads\/2025\/05\/sistem-grid-pada-majalah-pioneerprintinginc.webp 585w, https:\/\/www.apridesain.id\/blog\/wp-content\/uploads\/2025\/05\/sistem-grid-pada-majalah-pioneerprintinginc-300x206.webp 300w\" sizes=\"auto, (max-width: 585px) 100vw, 585px\" \/><figcaption class=\"wp-element-caption\">Sistem grid pada majalah<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>Baca juga: <\/strong><a href=\"https:\/\/www.apridesain.id\/blog\/beda-visual-identity-dan-brand-identity\/\"><strong>Elemen yang Membedakan Visual Identity dan Brand Identity<\/strong><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Kesimpulan<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Grid system adalah metode atau teknik di dalam desain yang memanfaatkan row, column, dan margin untuk membuat layout desain yang rapi.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Meskipun sistem grid merupakan hal fundamental di dunia desain, terkadang seorang desainer grafis yang berbakat sudah menerapkannya pada desain walaupun dia tidak atau belum tahu apa itu sistem grid.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Demikianlah artikel mengenai pengertian grid system dan contohnya ini.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bagaimana? Apakah informasi di atas sudah menjawab pertanyaan teman-teman?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Apabila ada pertanyaan atau ingin menambahkan, silakan tulis pesan Anda di kolom komentar, atau jika Anda ingin bekerja sama maupun menjadi sponsor, silakan <a href=\"https:\/\/www.apridesain.id\/blog\/kontak-kami\/\"><strong>hubungi kami di sini<\/strong><\/a>. Dan <em>follow<\/em> kami di <a href=\"https:\/\/www.instagram.com\/apridesain.id\/\" rel=\"noopener\"><em>Instagram<\/em><\/a> dan <a href=\"https:\/\/www.tiktok.com\/@apridesain.id\" rel=\"noopener\"><em>TikTok<\/em><\/a> untuk belajar dan menambah wawasan desain bersama-sama.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Referensi:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.eleken.co\/blog-posts\/grid-layout-design-history-tips-and-best-examples#what-are-the-five-types-of-grids\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.eleken.co\/blog-posts\/grid-layout-design-history-tips-and-best-examples#what-are-the-five-types-of-grids<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.clemson.edu\/brand\/design-elements\/grid-systems.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.clemson.edu\/brand\/design-elements\/grid-systems.html<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ingin membuat desain grafis yang terlihat pas dan memukau? Maka grid system adalah solusinya! Cari tahu selengkapnya di sini!<\/p>\n","protected":false},"author":1,"featured_media":3136,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-3141","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desain-grafis"],"_links":{"self":[{"href":"https:\/\/www.apridesain.id\/blog\/wp-json\/wp\/v2\/posts\/3141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.apridesain.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.apridesain.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.apridesain.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.apridesain.id\/blog\/wp-json\/wp\/v2\/comments?post=3141"}],"version-history":[{"count":0,"href":"https:\/\/www.apridesain.id\/blog\/wp-json\/wp\/v2\/posts\/3141\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.apridesain.id\/blog\/wp-json\/wp\/v2\/media\/3136"}],"wp:attachment":[{"href":"https:\/\/www.apridesain.id\/blog\/wp-json\/wp\/v2\/media?parent=3141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.apridesain.id\/blog\/wp-json\/wp\/v2\/categories?post=3141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.apridesain.id\/blog\/wp-json\/wp\/v2\/tags?post=3141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}