{"id":527,"date":"2026-06-15T19:52:57","date_gmt":"2026-06-15T12:52:57","guid":{"rendered":"https:\/\/www.bisasoftware.id\/2026\/?p=527"},"modified":"2026-06-15T19:52:57","modified_gmt":"2026-06-15T12:52:57","slug":"bab-13-css-grid","status":"publish","type":"post","link":"https:\/\/www.bisasoftware.id\/2026\/bab-13-css-grid\/","title":{"rendered":"BAB 13 &#8211; CSS GRID"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Pengertian<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">CSS Grid digunakan untuk membuat layout dua dimensi.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sangat cocok untuk:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dashboard<\/li>\n\n\n\n<li>Galeri<\/li>\n\n\n\n<li>Landing Page<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Struktur Dasar<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"grid\"&gt;<br>    &lt;div&gt;1&lt;\/div&gt;<br>    &lt;div&gt;2&lt;\/div&gt;<br>    &lt;div&gt;3&lt;\/div&gt;<br>    &lt;div&gt;4&lt;\/div&gt;<br>&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>.grid{<br>    display:grid;<br>    grid-template-columns:1fr 1fr;<br>}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Hasil<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>1 2<br>3 4<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Grid 3 Kolom<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>grid-template-columns:<br>1fr 1fr 1fr;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Memberi Jarak<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>gap:20px;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Praktik<\/h1>\n\n\n\n<pre class=\"wp-block-code\"><code>.grid{<br>    display:grid;<br>    grid-template-columns:<br>    repeat(3,1fr);<br><br>    gap:20px;<br>}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Latihan<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Buat galeri foto:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>6 gambar<\/li>\n\n\n\n<li>3 kolom<\/li>\n\n\n\n<li>Jarak 10px<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Tugas Praktik<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Buat halaman produk UMKM:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Foto produk<\/li>\n\n\n\n<li>Nama produk<\/li>\n\n\n\n<li>Harga<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Ditampilkan menggunakan Grid.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pengertian CSS Grid digunakan untuk membuat layout dua dimensi. Sangat cocok untuk: Struktur Dasar Hasil Grid 3 Kolom Memberi Jarak&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[15],"tags":[33],"class_list":["post-527","post","type-post","status-publish","format-standard","hentry","category-tutorial-css","tag-tutorial-css"],"_links":{"self":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/527","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/comments?post=527"}],"version-history":[{"count":1,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/527\/revisions"}],"predecessor-version":[{"id":528,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/527\/revisions\/528"}],"wp:attachment":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/media?parent=527"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/categories?post=527"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/tags?post=527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}