CSS Layout

We have 3 main layout approaches in CSS

  • In a block formatting context, boxes are laid out one after the other, vertically.
  • In an inline formatting context, boxes are laid out horizontally, one after the other.
  • CSS Grid Layout introduces a two-dimensional grid system to CSS. Grids can be used to lay out major page areas or small user interface elements.
  • The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.

Back to
Scroll to Top