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.
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.
These lay out methods are:
Normal fellow, Float, positioning, Flex box and Grid.
Normal fellow: this is the basic Lay out method that Html elements display one after each other in based on the HTML code.
Float: we use Float to shift a box to left or right and allowing content to display wrapped around it.
Positioning: remove the element from its normal position and allow you to place it wherever you need.
Flex box: this method allows you to put your content in a row or column.
This method gives lot of flexibility and opportunity to designers.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
Grid: Flex box has one direction but Grid is a two dimensional lay out.
Grid cells are smallest unit of Grid and this grid cells can have different size and they can overlap too.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout