Formatting Contexts
Flexbox and grid layouts
Unit: Advanced layouts
This unit will cover flex and grid, the two major alternative ways to arrange elements on a page.
Both flex and grid layouts are newer additions to CSS specification but they have both become ubiquitous on the web and largely replaced older, less convenient ways to layout your page.
To use either layout we set the display property on a parent element in order to control the layout of that element’s children.
In this unit
Flexbox
The flexible box or flexbox layout provides a simple way to organise elements into rows or columns within a parent element.
Grid Layouts
The CSS grid layout system is an extremely powerful and flexible way to create beautiful and unique layouts.