{"id":1902,"date":"2025-03-09T02:08:44","date_gmt":"2025-03-09T02:08:44","guid":{"rendered":"https:\/\/appliedartand.design\/lj\/?p=1902"},"modified":"2025-03-09T02:08:44","modified_gmt":"2025-03-09T02:08:44","slug":"grid-garden-party","status":"publish","type":"post","link":"https:\/\/appliedartand.design\/lj\/2025\/03\/09\/grid-garden-party\/","title":{"rendered":"Grid Garden Party"},"content":{"rendered":"\n<p>I played all 28 levels of the <a href=\"https:\/\/codepip.com\/games\/grid-garden\/\">Grid Garden<\/a> game and started our Grid Challenges assignment feeling pretty confident, only to get completely humbled!<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>I had to restart Challenge 5 three times, even though I was following the instructions. Don\u2019t get me wrong, I love grids! I don\u2019t understand them yet, but I already love them.<\/p>\n\n\n\n<p>They offer so many great options for designing layouts. Now I just have to learn about all those options and how they work!<\/p>\n\n\n\n<p>To expand my knowledge, I read <a href=\"https:\/\/css-tricks.com\/difference-explicit-implicit-grids\/\">The Difference Between Explicit and Implicit Grids<\/a> by Manuel Matuzovic. Matuzovic explained that explicit grids are defined by the developer and have a fixed number of lines and tracks. Implicit grids automatically expand when items overflow the grid&#8217;s existing rows or columns. <\/p>\n\n\n\n<p>Developers use properties to determine if a grid is explicit, implicit, or a mix of both. For example:<\/p>\n\n\n\n<p><strong>Grid-template-rows <\/strong>or<strong> -columns<\/strong> create explicit grids by defining a fixed number of lines and tracks.<\/p>\n\n\n\n<p><strong>Grid-auto-rows <\/strong>or<strong> -columns<\/strong> create implicit grids because they expand automatically when items overflow. However, we can still define the width and height of the cells.<\/p>\n\n\n\n<p><strong>Grid-auto-flow<\/strong> allows us to determine if the overflow will create a new column or a new row.<\/p>\n\n\n\n<p><strong>Grid-template-area <\/strong>can be explicit or partially implicit, depending on what rules you assign it. If you specify the number of grid lines, it\u2019s explicit. If you place a grid item outside the grid\u2019s boundaries, the browser will generate grid lines around the item, making the grid partially implicit.<\/p>\n\n\n\n<p>I look forward to learning even more about grids in the coming weeks!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I played all 28 levels of the Grid Garden game and started our Grid Challenges assignment feeling pretty confident, only to get completely humbled!<\/p>\n","protected":false},"author":94,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[240],"tags":[4,169,18],"class_list":["post-1902","post","type-post","status-publish","format-standard","hentry","category-aad-086-sp25","tag-css","tag-grids","tag-web-design"],"_links":{"self":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/1902","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/users\/94"}],"replies":[{"embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/comments?post=1902"}],"version-history":[{"count":1,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/1902\/revisions"}],"predecessor-version":[{"id":1903,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/1902\/revisions\/1903"}],"wp:attachment":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/media?parent=1902"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/categories?post=1902"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/tags?post=1902"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}