Flex Layout Tutorial: Syntax

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html (opens new window)

CSS Grid Layout Tutorial

http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html (opens new window)

Five Classic CSS Layouts in One Line of Code

http://www.ruanyifeng.com/blog/2020/08/five-css-layouts-in-one-line.html (opens new window)

• Centered layout

  Regardless of container size, the item always occupies the center point

• Side-by-side layout

  Multiple items side by side; items that don't fit wrap to the next line

• Two-column layout

  A sidebar and a main column. The sidebar is always present; the main column adjusts its width based on device width

• Sandwich layout

  The page is divided vertically into three parts: header, content area, and footer.

• Holy Grail layout

  The most commonly used layout, hence its name. It divides the page into five parts: besides the header and footer, the content area is split into a left sidebar, main column, and right sidebar.