{"id":749,"date":"2025-07-21T03:28:54","date_gmt":"2025-07-21T03:28:54","guid":{"rendered":"https:\/\/talentaskill.com\/blog\/?p=749"},"modified":"2025-07-21T03:28:56","modified_gmt":"2025-07-21T03:28:56","slug":"pengenalan-css-grid-layout","status":"publish","type":"post","link":"https:\/\/talentaskill.com\/blog\/pengenalan-css-grid-layout\/","title":{"rendered":"Pengenalan CSS Grid Layout"},"content":{"rendered":"\n<p>Ketika berbicara tentang desain web, kita tidak bisa lepas dari pentingnya layout atau tata letak. Layout yang rapi, responsif, dan mudah dikendalikan adalah kunci dari pengalaman pengguna yang menyenangkan. Salah satu alat modern yang sangat membantu dalam hal ini adalah CSS Grid Layout. Bagi Anda yang ingin memahami cara membangun tampilan web yang terstruktur dan fleksibel, CSS Grid adalah jawaban yang layak untuk dipelajari.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_76 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/talentaskill.com\/blog\/pengenalan-css-grid-layout\/#Apa_Itu_CSS_Grid_Layout\" >Apa Itu CSS Grid Layout?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/talentaskill.com\/blog\/pengenalan-css-grid-layout\/#Keunggulan_CSS_Grid_Dibandingkan_Metode_Layout_Lain\" >Keunggulan CSS Grid Dibandingkan Metode Layout Lain<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/talentaskill.com\/blog\/pengenalan-css-grid-layout\/#Dasar-Dasar_CSS_Grid_Layout\" >Dasar-Dasar CSS Grid Layout<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/talentaskill.com\/blog\/pengenalan-css-grid-layout\/#1_Menjadikan_Elemen_Sebagai_Grid_Container\" >1. Menjadikan Elemen Sebagai Grid Container<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/talentaskill.com\/blog\/pengenalan-css-grid-layout\/#2_Menentukan_Baris_dan_Kolom\" >2. Menentukan Baris dan Kolom<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/talentaskill.com\/blog\/pengenalan-css-grid-layout\/#3_Menempatkan_Item_ke_Area_Spesifik\" >3. Menempatkan Item ke Area Spesifik<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/talentaskill.com\/blog\/pengenalan-css-grid-layout\/#4_Menggunakan_Named_Grid_Areas\" >4. Menggunakan Named Grid Areas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/talentaskill.com\/blog\/pengenalan-css-grid-layout\/#5_Responsif_dengan_CSS_Grid\" >5. Responsif dengan CSS Grid<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/talentaskill.com\/blog\/pengenalan-css-grid-layout\/#Penutup\" >Penutup<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Apa_Itu_CSS_Grid_Layout\"><\/span>Apa Itu CSS Grid Layout?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/talentaskill.com\/blog\/wp-content\/uploads\/2025\/07\/adorable-young-woman-casual-outfit-standing-thinking-high-quality-photo-1-1024x683.jpg\" alt=\"pengenalan CSS Grid Layout\" class=\"wp-image-705\" srcset=\"https:\/\/talentaskill.com\/blog\/wp-content\/uploads\/2025\/07\/adorable-young-woman-casual-outfit-standing-thinking-high-quality-photo-1-1024x683.jpg 1024w, https:\/\/talentaskill.com\/blog\/wp-content\/uploads\/2025\/07\/adorable-young-woman-casual-outfit-standing-thinking-high-quality-photo-1-300x200.jpg 300w, https:\/\/talentaskill.com\/blog\/wp-content\/uploads\/2025\/07\/adorable-young-woman-casual-outfit-standing-thinking-high-quality-photo-1-768x512.jpg 768w, https:\/\/talentaskill.com\/blog\/wp-content\/uploads\/2025\/07\/adorable-young-woman-casual-outfit-standing-thinking-high-quality-photo-1-1536x1024.jpg 1536w, https:\/\/talentaskill.com\/blog\/wp-content\/uploads\/2025\/07\/adorable-young-woman-casual-outfit-standing-thinking-high-quality-photo-1-2048x1365.jpg 2048w, https:\/\/talentaskill.com\/blog\/wp-content\/uploads\/2025\/07\/adorable-young-woman-casual-outfit-standing-thinking-high-quality-photo-1-450x300.jpg 450w, https:\/\/talentaskill.com\/blog\/wp-content\/uploads\/2025\/07\/adorable-young-woman-casual-outfit-standing-thinking-high-quality-photo-1-780x520.jpg 780w, https:\/\/talentaskill.com\/blog\/wp-content\/uploads\/2025\/07\/adorable-young-woman-casual-outfit-standing-thinking-high-quality-photo-1-1600x1067.jpg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>CSS Grid Layout adalah sistem layout dua dimensi yang memungkinkan kita untuk mendesain layout web baik secara horizontal maupun vertikal dengan lebih mudah dan efisien. Berbeda dengan Flexbox yang lebih cocok untuk tata letak satu dimensi (baris atau kolom), Grid memberikan kontrol penuh atas baris <em>dan<\/em> kolom secara bersamaan.<\/p>\n\n\n\n<p>Dengan CSS Grid, kita bisa membagi halaman menjadi area yang kompleks, tanpa harus menggunakan float, positioning, atau trik-trik lama yang sering merepotkan.<\/p>\n\n\n\n<p>Kalau kamu ingin jadi web developer yang handal dan diakui, mengikuti<strong> <a href=\"https:\/\/talentaskill.com\/blog\/sertifikasi-web-developer\/\">Sertifikasi Web Developer <\/a><\/strong>bisa jadi langkah awal yang tepat. Sertifikasi ini membantumu memahami berbagai aspek penting dalam pengembangan web, mulai dari HTML, CSS, JavaScript, hingga framework modern. Cocok untuk pemula maupun yang ingin naik level secara profesional.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Keunggulan_CSS_Grid_Dibandingkan_Metode_Layout_Lain\"><\/span>Keunggulan CSS Grid Dibandingkan Metode Layout Lain<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Sebelum kita masuk ke bagian teknis, penting untuk memahami mengapa banyak developer mulai beralih ke CSS Grid:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Lebih intuitif<\/strong>: Dengan grid, kita bisa langsung mendefinisikan area layout tanpa terlalu banyak nesting.<\/li>\n\n\n\n<li><strong>Responsif<\/strong>: Mudah mengatur layout agar menyesuaikan dengan berbagai ukuran layar.<\/li>\n\n\n\n<li><strong>Bersih dan minimalis<\/strong>: Kode CSS jadi lebih ringkas dan mudah dibaca.<\/li>\n\n\n\n<li><strong>Mendukung area bernama<\/strong>: Memungkinkan kita memberi nama pada bagian layout untuk referensi yang lebih jelas.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Dasar-Dasar_CSS_Grid_Layout\"><\/span>Dasar-Dasar CSS Grid Layout<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Setelah memahami apa itu Grid dan keunggulannya, mari kita bahas dasar-dasar penggunaannya.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Menjadikan_Elemen_Sebagai_Grid_Container\"><\/span>1. Menjadikan Elemen Sebagai Grid Container<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Langkah pertama adalah menjadikan elemen sebagai grid container dengan properti <code>display: grid<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n  display: grid;\n}<\/code><\/pre>\n\n\n\n<p>Dengan ini, semua elemen anak (children) di dalam <code>.container<\/code> akan otomatis menjadi grid item.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Menentukan_Baris_dan_Kolom\"><\/span>2. Menentukan Baris dan Kolom<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Gunakan properti <code>grid-template-columns<\/code> dan <code>grid-template-rows<\/code> untuk mendefinisikan jumlah dan ukuran kolom\/baris.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n  display: grid;\n  grid-template-columns: 200px 1fr 1fr;\n  grid-template-rows: 100px auto;\n}<\/code><\/pre>\n\n\n\n<p>Kode di atas akan membuat layout dengan tiga kolom (satu 200px dan dua yang fleksibel) dan dua baris.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Menempatkan_Item_ke_Area_Spesifik\"><\/span>3. Menempatkan Item ke Area Spesifik<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Kita bisa menempatkan item ke posisi tertentu dengan <code>grid-column<\/code> dan <code>grid-row<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.item1 {\n  grid-column: 1 \/ 3;\n  grid-row: 1 \/ 2;\n}<\/code><\/pre>\n\n\n\n<p>Artinya, <code>.item1<\/code> akan membentang dari kolom pertama hingga kolom ketiga (tidak termasuk) dan berada di baris pertama.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Menggunakan_Named_Grid_Areas\"><\/span>4. Menggunakan Named Grid Areas<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Untuk layout yang lebih kompleks dan mudah dipahami, kita bisa memberi nama pada area grid:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n  display: grid;\n  grid-template-areas:\n    \"header header\"\n    \"sidebar content\";\n  grid-template-columns: 1fr 3fr;\n}\n\n.header {\n  grid-area: header;\n}\n\n.sidebar {\n  grid-area: sidebar;\n}\n\n.content {\n  grid-area: content;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_Responsif_dengan_CSS_Grid\"><\/span>5. Responsif dengan CSS Grid<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Gunakan fungsi seperti <code>repeat()<\/code> dan <code>minmax()<\/code> untuk membuat layout yang fleksibel:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n}<\/code><\/pre>\n\n\n\n<p>Dengan ini, jumlah kolom akan menyesuaikan ukuran layar secara otomatis, menjaga keterbacaan dan estetika tampilan.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Penutup\"><\/span>Penutup<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>CSS Grid Layout membuka banyak peluang baru dalam mendesain web. Dengan fleksibilitas, kemudahan penggunaan, dan kemampuan adaptasi yang tinggi, Grid layak menjadi bagian dari toolkit Anda sebagai web developer.<\/p>\n\n\n\n<p>Tak perlu langsung menguasai semua fitur Grid sekaligus. Mulailah dari dasar, praktikkan, dan kembangkan secara bertahap. Yang penting, jangan takut bereksperimen. Karena dalam dunia desain web, belajar dari percobaan adalah bagian dari perjalanan menuju hasil yang luar biasa!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ketika berbicara tentang desain web, kita tidak bisa lepas dari pentingnya layout atau tata letak. Layout yang rapi, responsif, dan mudah dikendalikan adalah kunci dari pengalaman pengguna yang menyenangkan. Salah satu alat modern yang sangat membantu dalam hal ini adalah CSS Grid Layout. Bagi Anda yang ingin memahami cara membangun tampilan web yang terstruktur dan [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":750,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[18],"tags":[171],"class_list":{"0":"post-749","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-developer","8":"tag-pengenalan-css-grid-layout"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Pengenalan CSS Grid Layout - Memberdayakan Talenta Digital<\/title>\n<meta name=\"description\" content=\"pengenalan CSS Grid Layout! Cara praktis dan powerful untuk bikin tata letak web jadi rapi,keren dan responsif!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/talentaskill.com\/blog\/pengenalan-css-grid-layout\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pengenalan CSS Grid Layout - Memberdayakan Talenta Digital\" \/>\n<meta property=\"og:description\" content=\"pengenalan CSS Grid Layout! Cara praktis dan powerful untuk bikin tata letak web jadi rapi,keren dan responsif!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/talentaskill.com\/blog\/pengenalan-css-grid-layout\/\" \/>\n<meta property=\"og:site_name\" content=\"Memberdayakan Talenta Digital\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-21T03:28:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-21T03:28:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/talentaskill.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-5-4.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/talentaskill.com\/blog\/pengenalan-css-grid-layout\/\",\"url\":\"https:\/\/talentaskill.com\/blog\/pengenalan-css-grid-layout\/\",\"name\":\"Pengenalan CSS Grid Layout - Memberdayakan Talenta Digital\",\"isPartOf\":{\"@id\":\"https:\/\/talentaskill.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/talentaskill.com\/blog\/pengenalan-css-grid-layout\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/talentaskill.com\/blog\/pengenalan-css-grid-layout\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/talentaskill.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-5-4.png\",\"datePublished\":\"2025-07-21T03:28:54+00:00\",\"dateModified\":\"2025-07-21T03:28:56+00:00\",\"author\":{\"@id\":\"https:\/\/talentaskill.com\/blog\/#\/schema\/person\/4d6b945da2497b03e12173f648ada531\"},\"description\":\"pengenalan CSS Grid Layout! Cara praktis dan powerful untuk bikin tata letak web jadi rapi,keren dan responsif!\",\"breadcrumb\":{\"@id\":\"https:\/\/talentaskill.com\/blog\/pengenalan-css-grid-layout\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/talentaskill.com\/blog\/pengenalan-css-grid-layout\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/talentaskill.com\/blog\/pengenalan-css-grid-layout\/#primaryimage\",\"url\":\"https:\/\/talentaskill.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-5-4.png\",\"contentUrl\":\"https:\/\/talentaskill.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-5-4.png\",\"width\":600,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/talentaskill.com\/blog\/pengenalan-css-grid-layout\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/talentaskill.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Pengenalan CSS Grid Layout\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/talentaskill.com\/blog\/#website\",\"url\":\"https:\/\/talentaskill.com\/blog\/\",\"name\":\"Memberdayakan Talenta Digital\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/talentaskill.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/talentaskill.com\/blog\/#\/schema\/person\/4d6b945da2497b03e12173f648ada531\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/talentaskill.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/52efc5d4a4e4491740ecd3081978c18cffc55ba5877da30e595a7bc67cc111bf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/52efc5d4a4e4491740ecd3081978c18cffc55ba5877da30e595a7bc67cc111bf?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/talentaskill.com\"],\"url\":\"https:\/\/talentaskill.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pengenalan CSS Grid Layout - Memberdayakan Talenta Digital","description":"pengenalan CSS Grid Layout! Cara praktis dan powerful untuk bikin tata letak web jadi rapi,keren dan responsif!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/talentaskill.com\/blog\/pengenalan-css-grid-layout\/","og_locale":"en_US","og_type":"article","og_title":"Pengenalan CSS Grid Layout - Memberdayakan Talenta Digital","og_description":"pengenalan CSS Grid Layout! Cara praktis dan powerful untuk bikin tata letak web jadi rapi,keren dan responsif!","og_url":"https:\/\/talentaskill.com\/blog\/pengenalan-css-grid-layout\/","og_site_name":"Memberdayakan Talenta Digital","article_published_time":"2025-07-21T03:28:54+00:00","article_modified_time":"2025-07-21T03:28:56+00:00","og_image":[{"width":600,"height":400,"url":"https:\/\/talentaskill.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-5-4.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/talentaskill.com\/blog\/pengenalan-css-grid-layout\/","url":"https:\/\/talentaskill.com\/blog\/pengenalan-css-grid-layout\/","name":"Pengenalan CSS Grid Layout - Memberdayakan Talenta Digital","isPartOf":{"@id":"https:\/\/talentaskill.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/talentaskill.com\/blog\/pengenalan-css-grid-layout\/#primaryimage"},"image":{"@id":"https:\/\/talentaskill.com\/blog\/pengenalan-css-grid-layout\/#primaryimage"},"thumbnailUrl":"https:\/\/talentaskill.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-5-4.png","datePublished":"2025-07-21T03:28:54+00:00","dateModified":"2025-07-21T03:28:56+00:00","author":{"@id":"https:\/\/talentaskill.com\/blog\/#\/schema\/person\/4d6b945da2497b03e12173f648ada531"},"description":"pengenalan CSS Grid Layout! Cara praktis dan powerful untuk bikin tata letak web jadi rapi,keren dan responsif!","breadcrumb":{"@id":"https:\/\/talentaskill.com\/blog\/pengenalan-css-grid-layout\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/talentaskill.com\/blog\/pengenalan-css-grid-layout\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/talentaskill.com\/blog\/pengenalan-css-grid-layout\/#primaryimage","url":"https:\/\/talentaskill.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-5-4.png","contentUrl":"https:\/\/talentaskill.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-5-4.png","width":600,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/talentaskill.com\/blog\/pengenalan-css-grid-layout\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/talentaskill.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Pengenalan CSS Grid Layout"}]},{"@type":"WebSite","@id":"https:\/\/talentaskill.com\/blog\/#website","url":"https:\/\/talentaskill.com\/blog\/","name":"Memberdayakan Talenta Digital","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/talentaskill.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/talentaskill.com\/blog\/#\/schema\/person\/4d6b945da2497b03e12173f648ada531","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/talentaskill.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/52efc5d4a4e4491740ecd3081978c18cffc55ba5877da30e595a7bc67cc111bf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/52efc5d4a4e4491740ecd3081978c18cffc55ba5877da30e595a7bc67cc111bf?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/talentaskill.com"],"url":"https:\/\/talentaskill.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/talentaskill.com\/blog\/wp-json\/wp\/v2\/posts\/749","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/talentaskill.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/talentaskill.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/talentaskill.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/talentaskill.com\/blog\/wp-json\/wp\/v2\/comments?post=749"}],"version-history":[{"count":1,"href":"https:\/\/talentaskill.com\/blog\/wp-json\/wp\/v2\/posts\/749\/revisions"}],"predecessor-version":[{"id":751,"href":"https:\/\/talentaskill.com\/blog\/wp-json\/wp\/v2\/posts\/749\/revisions\/751"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/talentaskill.com\/blog\/wp-json\/wp\/v2\/media\/750"}],"wp:attachment":[{"href":"https:\/\/talentaskill.com\/blog\/wp-json\/wp\/v2\/media?parent=749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/talentaskill.com\/blog\/wp-json\/wp\/v2\/categories?post=749"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/talentaskill.com\/blog\/wp-json\/wp\/v2\/tags?post=749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}