{"id":35084,"date":"2017-07-07T21:01:33","date_gmt":"2017-07-07T13:01:33","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=35084"},"modified":"2018-04-09T16:40:31","modified_gmt":"2018-04-09T08:40:31","slug":"learn-css-grid-layout","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/learn-css-grid-layout\/","title":{"rendered":"Learn CSS Grid Layout (The Fun Way) with Grid Garden"},"content":{"rendered":"<p>Most web developers know the <a href=\"https:\/\/www.hongkiat.com\/blog\/flexbox-froggy\/\">Flexbox Froggy game<\/a> that <strong>teaches you the basics of flexbox<\/strong> from scratch. This free game went viral and it\u2019s still incredibly valuable for teaching people how to <a href=\"https:\/\/www.hongkiat.com\/blog\/ui-design-an-intro-to-flexible-box\/\">code with flexbox<\/a>.<\/p>\n<p>Well, the same developer who made that game <strong>has a brand new game<\/strong> called <strong><a href=\"https:\/\/cssgridgarden.com\/\" target=\"_blank\">Grid Garden<\/a><\/strong>.<\/p>\n<p class=\"note\"><strong>Read Also:<\/strong> <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/css-grid-layout-module\/\">Introduction to the CSS Grid Layout Module<\/a><\/p>\n<p>This game works in a similar manner but teaches you <strong>how to code CSS grids<\/strong>. It\u2019s a relatively new feature but it\u2019s <strong>catching on fast<\/strong> and Grid Garden is easily the best way to learn.<\/p>\n<figure><a href=\"https:\/\/cssgridgarden.com\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/learn-css-grid-layout\/02-grid-garden-columns-rows-game.jpg\" alt=\"Grid Garden learning app\" width=\"1000\" height=\"532\"><\/a><\/figure>\n<p>Everything in Grid Garden follows a <strong>similar teaching style<\/strong> as Flexbox Froggy. It was created by the same developer, <a href=\"https:\/\/thomaspark.co\/\" target=\"_blank\">Thomas Park<\/a>, so you can expect a similar level of difficulty and usability.<\/p>\n<p>By default, you start at level one with a <strong>total of 28 levels<\/strong> from start to finish. You can always <strong>skip levels<\/strong> if you think any are too hard, but I find it\u2019s always good to work through them all just as a refresher.<\/p>\n<figure><a href=\"https:\/\/cssgridgarden.com\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/learn-css-grid-layout\/grid-garden-28-levels.jpg\" alt=\"grid garden of 28 levels\" width=\"922\" height=\"762\"><\/a><\/figure>\n<p>If you have no idea how grid-related properties work you\u2019ll find yourself Googling a lot of words. The CSS grid layout is a <strong>totally <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Grid_Layout\" target=\"_blank\">new module<\/a><\/strong> with its own syntax and features.<\/p>\n<p>I highly recommend toying around with Grid Garden whenever you get the chance. It\u2019s practically a <strong>CSS developer\u2019s playground<\/strong> for learning and studying all the various grid layout properties.<\/p>\n<p>I can\u2019t say this game will make you an expert in CSS grids. Only building projects and practicing a lot can bring you to an expert level. But, Grid Garden is a fun way to get started without all the usual stress that goes into learning something new.<\/p>\n<p>The entire project is totally free and open-sourced <a href=\"https:\/\/github.com\/thomaspark\/gridgarden\" target=\"_blank\">on GitHub<\/a> if you wanna download it locally to study or expand. You can also share your thoughts with the creator on Twitter <a href=\"https:\/\/twitter.com\/thomashpark\" target=\"_blank\">@thomashpark<\/a>.<\/p>\n<p class=\"note\"><strong>Read Also:<\/strong> <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/css-grid-layout-fr-unit\/\">Guide to CSS Grid Layout Fr Unit<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Most web developers know the Flexbox Froggy game that teaches you the basics of flexbox from scratch. This free game went viral and it\u2019s still incredibly valuable for teaching people how to code with flexbox. Well, the same developer who made that game has a brand new game called Grid Garden. Read Also: Introduction to&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507,4319],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Learn CSS Grid Layout (The Fun Way) with Grid Garden - Hongkiat<\/title>\n<meta name=\"description\" content=\"Most web developers know the Flexbox Froggy game that teaches you the basics of flexbox from scratch. This free game went viral and it&#039;s still incredibly\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/learn-css-grid-layout\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Learn CSS Grid Layout (The Fun Way) with Grid Garden\" \/>\n<meta property=\"og:description\" content=\"Most web developers know the Flexbox Froggy game that teaches you the basics of flexbox from scratch. This free game went viral and it&#039;s still incredibly\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/learn-css-grid-layout\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2017-07-07T13:01:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-04-09T08:40:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/learn-css-grid-layout\/02-grid-garden-columns-rows-game.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/learn-css-grid-layout\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/learn-css-grid-layout\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Learn CSS Grid Layout (The Fun Way) with Grid Garden\",\"datePublished\":\"2017-07-07T13:01:33+00:00\",\"dateModified\":\"2018-04-09T08:40:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/learn-css-grid-layout\\\/\"},\"wordCount\":330,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/learn-css-grid-layout\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/learn-css-grid-layout\\\/02-grid-garden-columns-rows-game.jpg\",\"keywords\":[\"CSS\",\"CSS Grid Layout\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/learn-css-grid-layout\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/learn-css-grid-layout\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/learn-css-grid-layout\\\/\",\"name\":\"Learn CSS Grid Layout (The Fun Way) with Grid Garden - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/learn-css-grid-layout\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/learn-css-grid-layout\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/learn-css-grid-layout\\\/02-grid-garden-columns-rows-game.jpg\",\"datePublished\":\"2017-07-07T13:01:33+00:00\",\"dateModified\":\"2018-04-09T08:40:31+00:00\",\"description\":\"Most web developers know the Flexbox Froggy game that teaches you the basics of flexbox from scratch. This free game went viral and it's still incredibly\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/learn-css-grid-layout\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/learn-css-grid-layout\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/learn-css-grid-layout\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/learn-css-grid-layout\\\/02-grid-garden-columns-rows-game.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/learn-css-grid-layout\\\/02-grid-garden-columns-rows-game.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/learn-css-grid-layout\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Learn CSS Grid Layout (The Fun Way) with Grid Garden\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Learn CSS Grid Layout (The Fun Way) with Grid Garden - Hongkiat","description":"Most web developers know the Flexbox Froggy game that teaches you the basics of flexbox from scratch. This free game went viral and it's still incredibly","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:\/\/www.hongkiat.com\/blog\/learn-css-grid-layout\/","og_locale":"en_US","og_type":"article","og_title":"Learn CSS Grid Layout (The Fun Way) with Grid Garden","og_description":"Most web developers know the Flexbox Froggy game that teaches you the basics of flexbox from scratch. This free game went viral and it's still incredibly","og_url":"https:\/\/www.hongkiat.com\/blog\/learn-css-grid-layout\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-07-07T13:01:33+00:00","article_modified_time":"2018-04-09T08:40:31+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/learn-css-grid-layout\/02-grid-garden-columns-rows-game.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/learn-css-grid-layout\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/learn-css-grid-layout\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Learn CSS Grid Layout (The Fun Way) with Grid Garden","datePublished":"2017-07-07T13:01:33+00:00","dateModified":"2018-04-09T08:40:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/learn-css-grid-layout\/"},"wordCount":330,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/learn-css-grid-layout\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/learn-css-grid-layout\/02-grid-garden-columns-rows-game.jpg","keywords":["CSS","CSS Grid Layout"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/learn-css-grid-layout\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/learn-css-grid-layout\/","url":"https:\/\/www.hongkiat.com\/blog\/learn-css-grid-layout\/","name":"Learn CSS Grid Layout (The Fun Way) with Grid Garden - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/learn-css-grid-layout\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/learn-css-grid-layout\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/learn-css-grid-layout\/02-grid-garden-columns-rows-game.jpg","datePublished":"2017-07-07T13:01:33+00:00","dateModified":"2018-04-09T08:40:31+00:00","description":"Most web developers know the Flexbox Froggy game that teaches you the basics of flexbox from scratch. This free game went viral and it's still incredibly","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/learn-css-grid-layout\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/learn-css-grid-layout\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/learn-css-grid-layout\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/learn-css-grid-layout\/02-grid-garden-columns-rows-game.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/learn-css-grid-layout\/02-grid-garden-columns-rows-game.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/learn-css-grid-layout\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Learn CSS Grid Layout (The Fun Way) with Grid Garden"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-97S","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/35084","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=35084"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/35084\/revisions"}],"predecessor-version":[{"id":35087,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/35084\/revisions\/35087"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=35084"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=35084"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=35084"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=35084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}