CSS page layout techniques allow us to take elements contained in a web page and control where they’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.
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
- Flexbox
- Grid
- Floats
- Positioning
I will talk about Flexbox and Grid.
Flexbox:
Flexbox is the short name for the Flexible Box Layout CSS module, designed to make it easy for us to lay things out in one dimension — either as a row or as a column. To use flexbox, you apply display: flex to the parent element of the elements you want to layout; all its direct children then become flex items. If we add display: flex to the parent, the items now arrange themselves into columns. This is due to them becoming flex items and being affected by some initial values that flexbox sets on the flex container. They are displayed in a row because the property flex-direction of the parent element has an initial value of the row. They all appear to stretch in height because the property align-items of their parent element have an initial value of stretch. 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.
Grid:
While flexbox is designed for one-dimensional layout, Grid Layout is designed for two dimensions — lining things up in rows and columns.
Similar to flexbox, we enable Grid Layout with its specific display value — display: grid. It lets you lay content out in rows and columns. It has many features that make building complex layouts straightforward.
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’t jump around or change width as we move from page to page, providing greater consistency on our websites.