{"id":839,"date":"2020-10-03T22:04:38","date_gmt":"2020-10-03T22:04:38","guid":{"rendered":"https:\/\/appliedartand.design\/lj\/?p=839"},"modified":"2020-10-03T22:04:38","modified_gmt":"2020-10-03T22:04:38","slug":"css-lay-outs","status":"publish","type":"post","link":"https:\/\/appliedartand.design\/lj\/2020\/10\/03\/css-lay-outs\/","title":{"rendered":"CSS Lay outs"},"content":{"rendered":"\n
\"\"<\/figure><\/div>\n\n\n\n

During the last two weeks we learn about different CSS layouts and read a very interesting article by Rachel Andrew. According to article today we have real choice for approaching our designs. This article was a little bit overwhelming for me but it opens new doors of opportunity for better designs and more knowledge.<\/p>\n\n\n\n\n\n\n\n

Although Combine these method can make our layout look very complicated but in fact using them wisely give us more flexibility in design and managing the code in CSS.<\/p>\n\n\n\n

These lay out methods are:<\/p>\n\n\n\n

Normal fellow, Float, positioning, Flex box and Grid.<\/p>\n\n\n\n

Normal fellow: this is the basic Lay out method that Html elements display one after each other in based on the HTML code.<\/p>\n\n\n\n

Float: we use Float to shift a box to left or right and allowing content to display wrapped around it.<\/p>\n\n\n\n

Positioning: remove the element from its normal position and allow you to place it wherever you need.<\/p>\n\n\n\n

Flex box: this method allows you to put your content in a row or column.<\/p>\n\n\n\n

This method gives lot of flexibility and opportunity to designers.<\/p>\n\n\n\n

https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Flexible_Box_Layout\/Basic_Concepts_of_Flexbox<\/a><\/p>\n\n\n\n

Grid: Flex box has one direction but Grid is a two dimensional lay out.<\/p>\n\n\n\n

Grid cells are smallest unit of Grid and this grid cells can have different size and they can overlap too.<\/p>\n\n\n\n

https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Grid_Layout<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

During the last two weeks we learn about different CSS layouts and read a very interesting article by Rachel Andrew. According to article today we have real choice for approaching our designs. This article was a little bit overwhelming for me but it opens new doors of opportunity for better designs and more knowledge.<\/p>\n","protected":false},"author":30,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[155],"tags":[23],"class_list":["post-839","post","type-post","status-publish","format-standard","hentry","category-aad-086-fa20","tag-css-layout"],"_links":{"self":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/839","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\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/comments?post=839"}],"version-history":[{"count":1,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/839\/revisions"}],"predecessor-version":[{"id":841,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/839\/revisions\/841"}],"wp:attachment":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/media?parent=839"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/categories?post=839"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/tags?post=839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}