CSS Layout Flex and Grid

Background -

Flexbox (Flexible Box Layout)

• Introduced in 2009 as part of CSS3.

• Designed for one-dimensional layout (either row or column).

Purpose:

• Simplifies complex layouts like vertical and horizontal centering.

• Ideal for components like navigation bars, buttons, and items in a single row or column.

CSS Grid Layout

• Released in 2017 as part of CSS3.

• Designed for two-dimensional layout (both rows and columns).

Purpose:

• Ideal for building complete web layouts, like page templates, dashboards, or gallery-style designs.

Why We Need-

Flexbox (Flexible Box Layout)

• Dynamic Alignment

• Flexible Sizing

• Order Control

• Common Use Cases:

  • Navigation bars

  • Button groups

  • Aligning small components (e.g., icons with text)

CSS Grid Layout

• Precise Layouts:

• Grid Areas: e.g., header, sidebar, content

• Responsive Design

• Common Use Cases:

  • Full-page layouts (e.g., header, footer, sidebar, and main content)

  • Gallery-style layouts

  • Dashboards with widgets

CSS Flexbox-

Flexbox: I care about the order and alignment of items in a row/column.

Common Properties:

• Container(Parent):

• display: define a flex container

    .container {
      display: flex; /* or inline-flex */
    }
  

• flex-direction: direction of the main axis in a flex container

    .container {
      flex-direction: row | row-reverse | column | column-reverse;
    }
  

• justify-content: align and distribute flex items (or grid items) along the main axis of a container.

    .container {
      justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
    }
  

• align-items: align flex items (or grid items) along the cross axis of the container.

    .container {
      align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
    }
  

• flex-wrap: the flex container's items should wrap onto multiple lines or stay on a single line.

•       .container {
          flex-wrap: nowrap | wrap | wrap-reverse;
        }
  

• align-content: To control the alignment of flex lines (not individual items) along the cross axis of a flex container.

    .container {
      align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
    }
  

• Gap: To define the space between rows and columns in a flex container, grid container, or other multi-column layouts.

.container {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
}

• Items(Child):

• flex: These properties control the size and behavior of flex items inside the container.

    .item {
      flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    }
  

• flex-grow: how a flex item will grow relative to the other items in the flex container when there is extra space available.

.item {
  flex-grow: 4; /* default 0 */
}

• align-self: used to override the alignment of a specific flex item along the cross axis in a flexbox layout.

    .item {
      align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }
  

• flex-shrink: The shrink factor of a flex item, indicating how the item will shrink when there is not enough space available in the flex container.

.item {
  flex-shrink: 3; /* default 1 */
}

• order: control the order in which flex items appear within a flex container, regardless of their position in the HTML code.

    .item {
      order: 5; /* default is 0 */
    }
  

CSS Grid Layout-

Grid: "I care about the structure and layout of the entire space."

Common Properties:

• Container:

  • display: used to create a grid layout, where elements are placed into rows and columns

      .container {
        display: grid;
      }
    

  • grid-template-rows: used to define the size of the rows in a grid layout. It specifies how the available space in a grid container is divided among the rows.

      .container {
        grid-template-rows: value1 value2 value3 ...;
      }
    

  • grid-template-columns: the size and number of columns in a grid layout. Just like grid-template-rows controls the rows, grid-template-columns controls the columns in a grid container.

      .container {
        grid-template-columns: value1 value2 value3 ...;
      }
    

  • gap: set the space between items in both grid and flexbox layouts.

      .container {
        gap: row-gap column-gap;
      }
    

  • justify-items: used in grid layouts to align grid items along the inline axis within their grid cells.

      .container {
        justify-items: start | end | center | stretch
      }
    

  • align-items: used in grid layouts (and flexbox layouts) to control the vertical alignment of items within their container.

      .container {
        align-items: end | start | center | stretch | baseline
      }
    

• Items:

  • grid-column: It specifies which column lines a grid item should span across, allowing you to control the positioning and size of grid items within a grid.

      .item {
        grid-column: start-line / end-line;
      }
    

  • justify-self: used to control the horizontal alignment of a grid item within its grid cell. It aligns the item along the inline axis

      .item {
        justify-self:start | center | stretch;
      }
    

align-self: used to control the vertical alignment of a single grid item (or flex item) within its grid cell (or flex container).

.item {
  align-self:start | center | stretch;
}

Read More Blogs

Thank you for taking time to read this.