Dimensions
Flexbox works primarily in a single dimension; either a row or column (this is true even if wrapping is turned on).
Grid, however, is two-dimensional.
Content or Layout Driven
Flexbox is content-driven: the size of the flex items can change based on content.
Grid is layout driven: content must be shaped to fit within the layout.
Flexbox
There are three flexboxes shown below; one for each term to be defined. The dotted red border This demonstrates the single-dimension focus. However, notice how the flex items change size based upon their content (term and definition)? This demonstrates the content-driven sizing of flexbox.
Term
Definition
Some terms are longer than others
Definition
Term to Define
This is a much longer definition. Let's see what happens.
Grid
The following definitions are contained within a single grid, as shown by the red border. This layout demonstrates the two-dimensional aspect of grid. Notice that the terms are all given the same space, even if a second line is required. The layout does not change size based on content; rather, the content much change based on the layout.
Term
Definition
Some terms are longer than others
Definition
Term to Define
This is a much longer definition. Let's see what happens.
