{"id":1166,"date":"2022-03-04T05:30:59","date_gmt":"2022-03-04T05:30:59","guid":{"rendered":"https:\/\/appliedartand.design\/lj\/?p=1166"},"modified":"2022-03-04T05:30:59","modified_gmt":"2022-03-04T05:30:59","slug":"css-layout","status":"publish","type":"post","link":"https:\/\/appliedartand.design\/lj\/2022\/03\/04\/css-layout\/","title":{"rendered":"CSS Layout"},"content":{"rendered":"\n<p>CSS page layout techniques allow us to take elements contained in a web page and control where they&#8217;re positioned relative to the following factors: their default position in normal layout flow, the other elements around them, their parent container, and the main viewport\/window.\u00a0<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>During the past and current two weeks, we have learned a lot about CSS layout I will show more important CSS layout techniques and they are <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Flexbox<\/li><li>Grid<\/li><li>Floats<\/li><li>Positioning<\/li><\/ul>\n\n\n\n<p>I will talk about Flexbox and Grid.<\/p>\n\n\n\n<p><strong>Flexbox:<\/strong><\/p>\n\n\n\n<p>Flexbox is the short name for the\u00a0Flexible Box Layout\u00a0CSS module, designed to make it easy for us to lay things out in one dimension \u2014 either as a row or as a column. To use flexbox, you apply\u00a0display: flex\u00a0to the parent element of the elements you want to layout; all its direct children then become\u00a0<em>flex items<\/em>. If we add\u00a0display: flex\u00a0to the parent, the items now arrange themselves into columns. This is due to them becoming\u00a0<em>flex items<\/em>\u00a0and being affected by some initial values that flexbox sets on the flex container. They are displayed in a row because the property\u00a0flex-direction\u00a0of the parent element has an initial value of\u00a0the row. They all appear to stretch in height because the property\u00a0align-items\u00a0of their parent element have an initial value of\u00a0stretch. This means that the items stretch to the height of the flex container, which in this case is defined by the tallest item. The items all line up at the start of the container, leaving any extra space at the end of the row.\u00a0<\/p>\n\n\n\n<p><strong>Grid:<\/strong><\/p>\n\n\n\n<p>While flexbox is designed for one-dimensional layout, Grid Layout is designed for two dimensions \u2014 lining things up in rows and columns.<\/p>\n\n\n\n<p>Similar to flexbox, we enable Grid Layout with its specific display value \u2014\u00a0display: grid. It lets you lay content out in rows and columns. It has many features that make building complex layouts straightforward.<\/p>\n\n\n\n<p>A grid is a collection of horizontal and vertical lines creating a pattern against which we can line up our design elements. They help us to create layouts in which our elements won&#8217;t jump around or change width as we move from page to page, providing greater consistency on our websites. <br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS page layout techniques allow us to take elements contained in a web page and control where they&#8217;re positioned relative to the following factors: their default position in normal layout flow, the other elements around them, their parent container, and the main viewport\/window.\u00a0<\/p>\n","protected":false},"author":47,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[178],"tags":[48,23],"class_list":["post-1166","post","type-post","status-publish","format-standard","hentry","category-aad-086-sp22","tag-css-grid","tag-css-layout"],"_links":{"self":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/1166","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\/47"}],"replies":[{"embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/comments?post=1166"}],"version-history":[{"count":1,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/1166\/revisions"}],"predecessor-version":[{"id":1167,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/1166\/revisions\/1167"}],"wp:attachment":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/media?parent=1166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/categories?post=1166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/tags?post=1166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}