Flex Layout

The two axes of flexbox

The main axis and the cross axis. The main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it.

Multi-line flex containers with flex-wrap

To cause wrapping behavior add the property flex-wrap with a value of wrap. Now, should your items be too large to all display in one line, they will wrap onto another line. Set it to nowrap, and they will instead shrink to fit the container. Using nowrap would cause an overflow if the items were not able to shrink, or could not shrink small enough to fit.

The flex-flow shorthand

You can combine the two properties flex-direction and flex-wrap into the flex-flow shorthand. The first value specified is flex-direction  and the second value is flex-wrap.

.box {
        display: flex;
        flex-flow: row wrap;
      }

Grid Layout

We define rows and columns on our grid with the grid-template-rows  and grid-template-columns properties.

The fr unit

Grid also introduces an additional length unit to help us create flexible grid tracks. The new fr unit represents a fraction of the available space in the grid container. Tracks grow and shrink according to the available space.

Implicit and explicit grids

Use grid-auto-rows to ensure that tracks created in the implicit grid are 200 pixels tall.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
}