From the course: CSS Layouts: From Float to Flexbox and Grid

Layouts with CSS

- [Narrator] CSS includes a variety of layout methods. In this course, we'll cover these techniques. The normal flow, which defines the default layout behavior before any CSS is added. Floats, which was a technique used to create page layouts as we moved away from HTML table based layouts. Positioning is also used to move elements from the normal flow, but it's generally used for smaller components within a page layout. Flexbox introduced more efficient ways to align and distribute content in either columns or rows. Grid allows for more complex layouts since page content can be arranged in columns and rows at the same time. The multi-column layout is another newer technique that allows content to be displayed in newspaper style columns. It's not as commonly used for page layouts, so I won't be covering it in this course. But if you'd like to learn more, you can view these examples from the MDN, Mozilla Developer Network, web docs. You can also check out the official and latest published version maintained by the W3C. Each layout technique has its own purpose and understanding what each method is designed to do will help you choose the best layout solution for the task at hand.

Contents