Grid vs Flexbox

Grid and Flex Display Properties

Two new CSS display properties (grid and flex) greatly improved the ability to specify the layout/positioning of sub-sections of an HTML document. These new CSS properties allow the web developer to specify a precise layout for how the children within a parent element's rectangular box are positioned. The parent container can be the HTML element for the overall page, or any sub-section of the HTML element hierarchy.

Grid is ideally suited for lining things up in two dimensions, whereas flexbox is ideally suited for lining things up in one dimension.

But Grid can be used in one-dimension only.

Flex only needs to be used when you need to control the distribution of the elements. In the layout below, the elements within the Yellow and Red sections will evenly distribute themselves by default and so do not need to be in a flex container.

Whereas, in the following examples, the elements take up different proportions of the container and the order of the elements is reversed. These are properties of the flex container.

Flexbox Wrapping

Flexbox can wrap elements, but it still is only laying the elements out in a single direction.

Flexbox is ideally suited for one-dimension

This example demonstrates the different flex settings and how it effects the layout of a horizontal <nav> element.

Resources