The recent launch of the CSS grid property in Safari, Chrome and Firefox prompted me to search on the differences between Grid and Flexbox.

Flexbox

Basic notes

  • Container lays items out vertically or horizontally (which determines the main axis).
  • Space between items can be distributed evenly.
  • Items can be centered horizontally and vertically.
  • Items can be re-ordered visually in the container.
  • Items can wrap (or not) along the cross-axis (which is perpendicular to the main axis).

Advanced notes

  • Once content is broken into lines (caused by wrapped items), each line is laid out independently. Justify-Content and Align-Self only consider the items on a single line at a time.
  • Basis, grow, shrink, and margins on items only consider the space on the current line.
  • An item is inflexible when both grow and shrink are set to zero.
  • On the main-axis, space is distributed as follows: basis of items, then auto-margins, then justify-content.
  • todo: add a note on the default and special values of the flex shorthand.

Container

  • Direction
    • row: lays out horizontally.
    • column: lays out vertically.
    • both can be reversed.
  • Wrap
    • nowrap (default)
    • wrap
    • wrap-reserve: the former items will wrap first.
  • Align-items
    • Provide a default value for the property align-self of its items.
    • start, end, center, baseline, stretch
  • Justify-content (items on main-axis)
    • Manages remaining space on the main axis of the current line.
    • Done after any flexible lengths, or auto margins on items are resolved.
    • start, end, center: items are packed at the start, end, or center of the axis.
    • space-between: distribute space evenly between items.
    • space-around: distribute space evenly around items.
  • Align-content (lines on cross-axis)
    • Manages remaining space on the cross-axis, considering all lines.
    • start, end, center: lines are packed at the start, end, or center of the axis.
    • space-between: distribute space evenly between lines.
    • space-around: distribute space evenly around lines.

Item

  • Basis
    • base width value, or
    • absolute length, or
    • percentage of the container, or
    • automatic sizing
      • auto: lookup width or height property.
      • content: based on content of item.
  • Grow
    • number (relative to the sum of all items' grow)
    • ratio of space the item will take when there's more space in the container than what the content of all items takes.
  • Shrink
    • number (relative to the sum of all items' shrink)
    • ratio of space the item will take when there's not enough space in the container for the content of all items.
  • Order
    • can change the visual order of the item (which is by default the same as its order in the DOM).
  • Align-Self
    • Item is aligned on the cross-axis of the current line.
    • default value is set if the container has set align-items.
    • auto (default): defers to align-items.
    • start, end, center: items packed at the start, end, center of line.
    • stretch
      • If cross-axis size and margins computes to auto on the item, the item will stretch.
      • However, min/max-height/width constraints are respected.
    • baseline
      • Item participates in baseline alignment.
      • All participating items on the current line are aligned such that their baselines align.
      • The item with the largest distance between its baseline and the cross-start of the current line is placed flush against the cross-start position.

References

Grid

  • Grid arranges in two dimensions (whereas flex lays out in one)
  • Define rows and columns
  • Specify which blocks cover which rows/columns.
  • Easily create responsive grid layouts

References

Personal notes

Grid has been in development for a very long time. Browser devs didnt want to reproduce the buggy launch of Flexbox, so a lot of time has been spent on grid interoperability between Chrome and Firefox.

Finally, an independent team named Igalia has been responsible for implementing Grid in Safari and Chrome, which was suprising to me.