Flexbox vs. Grid Layout

You can use more than one display on a particular webpage. This means that you can display a particular div as a grid and another div as a flexbox.

The basic difference between CSS grid layout and CSS flexbox layout is that:

  • Flexbox was designed for layout in one dimension - either a row or a column.
  • Grid was designed for two-dimensional layout - rows, and columns at the same time.

Flexbox works from the content out. An ideal use case for flexbox is when you have a set of items and want to space them out evenly in a container. You let the size of the content decide how much individual space each item takes up. If the items wrap onto a new line, they will work out their spacing based on their size and the available space on that line.

Grid works from the layout in. When you use CSS grid layout you create a layout and then you place items into it, or you allow the auto-placement rules to place the items into the grid cells according to that strict grid. It is possible to create tracks that respond to the size of the content, however, they will also change the entire track.

Flexbox

Container Properties (applied to the parent element with display: flex;):

  • display: flex;: Defines a flex container and enables flex context for all its direct children.
  • flex-direction: Defines the direction of the flex items.
    • row (default): Items are placed in a row, left to right.
    • row-reverse: Items are placed in a row, right to left.
    • column: Items are placed in a column, top to bottom.
    • column-reverse: Items are placed in a column, bottom to top.
  • justify-content: Aligns the flex items along the main axis (horizontal by default).
    • flex-start (default): Items are aligned to the start of the container.
    • flex-end: Items are aligned to the end of the container.
    • center: Items are centered along the main axis.
    • space-between: Items are evenly distributed with the first item at the start and the last item at the end.
    • space-around: Items are evenly distributed with equal space around them.
    • space-evenly: Items are evenly distributed with equal space between them.
  • align-items: Aligns flex items along the cross axis (vertical by default).
    • stretch (default): Items stretch to fill the container.
    • flex-start: Items are aligned to the start of the container.
    • flex-end: Items are aligned to the end of the container.
    • center: Items are centered along the cross axis.
    • baseline: Items are aligned such that their baselines align.
  • align-content: Aligns flex lines within a flex container when there is extra space on the cross axis.
    • stretch (default)
    • flex-start
    • flex-end
    • center
    • space-between
    • space-around
  • flex-wrap: Controls whether the flex items should wrap or not.
    • nowrap (default): All items are placed on one line.
    • wrap: Items will wrap onto multiple lines from top to bottom.
    • wrap-reverse: Items will wrap onto multiple lines from bottom to top.

Item Properties (applied to the direct children of a flex container):

  • flex-grow: Defines the ability for a flex item to grow if necessary. The default value is 0 (no growth).
  • flex-shrink: Defines the ability for a flex item to shrink if necessary. The default value is 1 (items can shrink).
  • flex-basis: Defines the default size of an element before the remaining space is distributed. Accepts lengths (e.g., 20%, 200px) or auto.
  • flex: A shorthand for flex-grow, flex-shrink, and flex-basis. For example, flex: 1; is equivalent to flex-grow: 1; flex-shrink: 1; flex-basis: 0;.
  • align-self: Allows a single item to be aligned differently from the rest of the flex items. The possible values are the same as align-items.
  • order: Controls the order in which the flex items appear within the container. Default is 0, and items with higher values appear later.

Grid

Container Properties (applied to the parent element with display: grid;):

  • display: grid;: Defines a grid container and enables grid context for all its direct children.
  • grid-template-columns: Defines the columns of the grid with space-separated values. You can use:
    • repeat(): For repeating columns (e.g., repeat(3, 1fr) for 3 equal columns).
    • Fixed sizes: e.g., 100px, 20%.
    • Fractional units (fr): e.g., 1fr for equal distribution.
  • grid-template-rows: Defines the rows of the grid similarly to columns.
  • grid-template-areas: Defines grid areas by using named sections, allowing you to visually structure your grid layout in the CSS.
  • gap (or grid-gap): Defines the space between grid items. You can set both row-gap and column-gap.
    • e.g., gap: 20px; or row-gap: 10px; column-gap: 20px;.

Item Properties (applied to the direct children of a grid container):

  • grid-column: Specifies how many columns an item should span.
    • e.g., grid-column: 1 / 3; spans the item from the first to the third column.
  • grid-row: Specifies how many rows an item should span.
    • e.g., grid-row: 2 / 4; spans the item from the second to the fourth row.
  • grid-area: Assigns an item to a named grid area defined in grid-template-areas.
  • justify-self: Aligns an item along the row axis within its grid cell.
    • start, end, center, stretch (default).
  • align-self: Aligns an item along the column axis within its grid cell.
    • start, end, center, stretch (default).
  • justify-items: Aligns all grid items along the row axis within their cells.
    • start, end, center, stretch.
  • align-items: Aligns all grid items along the column axis within their cells.
    • start, end, center, stretch.