The Big Four of CSS Positioning: Flexbox, Grid, Float, and Positioning. What is the difference and which should I be using?
Flexbox: Flexbox operates as a ‘parent-child’ relationship, meaning that display: flex is applied to the parent elements (flex-containers), with declarations used to control the behavior of the child elements (flex-items).
Grid: CSS Grid Layout is a method that manages both columns and rows in a layout. It can be used to help developers work with large layouts on a webpage.
Float: The CSS float property is typically used to push an element to the left or right, taking it out of the flow in relation to other block elements. This allows for content to wrap around the floated element. Without it, layouts would rely solely on positioning which would be difficult and messy.
Positioning: There are a number of different types of positioning that you can put into effect on HTML elements. Static, absolute, relative, fixed, and sticky. These change how elements can be positioned in relation to other elements on the page, or even the page itself.
So which should I use? Well, as we can see there are pros to each method of CSS layout. Whether you want to choose one of the above, like flexbox, or a combination (like Flexbox inside of grid) is up to you and the particular layout you want to achieve. Because of this, it is important to have an understanding of how to work with each of them.