{"id":1925,"date":"2025-03-11T05:54:24","date_gmt":"2025-03-11T05:54:24","guid":{"rendered":"https:\/\/appliedartand.design\/lj\/?p=1925"},"modified":"2025-03-11T05:54:24","modified_gmt":"2025-03-11T05:54:24","slug":"learning-grids","status":"publish","type":"post","link":"https:\/\/appliedartand.design\/lj\/2025\/03\/11\/learning-grids\/","title":{"rendered":"Learning Grids!"},"content":{"rendered":"\n<p>Hello Everyone!<\/p>\n\n\n\n<p>This week we&#8217;ve dived further into web layout tools\/techniques. Specifically, focusing on Grid, Positioning, and Flexbox! Here are some of my thoughts&#8230;<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>When I used to think of grids within CSS, I usually just pictured something similar to a rubrics cube. Just a 3 by 3 layout of squares. Although, this week I&#8217;ve learned that there is so much more out there in the CSS grid world! I learned you can do all sorts of cool tricks with grids like changing their perspective and revealing hidden elements within a grid. <\/p>\n\n\n\n<p> We also worked with flexbox and positioning as I mentioned above. Unlike grids, both of these layout tools I have worked with previously. Although, with positioning I never really dived into it so I never really learned how it worked, and similar with flexbox, I&#8217;ve used it a lot and understood most of it, but not all of it. I really liked working with the problem-solving exercises this week as it really challenged my brain to learn these tools in a hands-on way!<\/p>\n\n\n\n<p>For my picture this week, I did a quick google search on CSS grids and I found this cool one that looked similar to one of our examples this week!<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1001\" height=\"500\" src=\"https:\/\/appliedartand.design\/lj\/wp-content\/uploads\/2025\/03\/image.png\" alt=\"\" class=\"wp-image-1927\" srcset=\"https:\/\/appliedartand.design\/lj\/wp-content\/uploads\/2025\/03\/image.png 1001w, https:\/\/appliedartand.design\/lj\/wp-content\/uploads\/2025\/03\/image-300x150.png 300w, https:\/\/appliedartand.design\/lj\/wp-content\/uploads\/2025\/03\/image-768x384.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/figure><\/div>","protected":false},"excerpt":{"rendered":"<p>Hello Everyone! This week we&#8217;ve dived further into web layout tools\/techniques. Specifically, focusing on Grid, Positioning, and Flexbox! Here are some of my thoughts&#8230;<\/p>\n","protected":false},"author":87,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[240],"tags":[4,23,22,169,3],"class_list":["post-1925","post","type-post","status-publish","format-standard","hentry","category-aad-086-sp25","tag-css","tag-css-layout","tag-flexbox","tag-grids","tag-html"],"_links":{"self":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/1925","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\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/comments?post=1925"}],"version-history":[{"count":1,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/1925\/revisions"}],"predecessor-version":[{"id":1928,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/1925\/revisions\/1928"}],"wp:attachment":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/media?parent=1925"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/categories?post=1925"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/tags?post=1925"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}