DEV Community

Umme Q
Umme Q

Posted on

Difference between Flexbox and CSS grid?

Flexbox:

  1. Flexbox a 1-dimensional system, meaning it can handle in rows.
    Example
    Home About us Gallery --------------->(Header)

  2. Main motive to alter width and height to best fill the available space

  3. More focus on content rather than layout

  4. Use for small scale, fundamentally to display linear.

CSS Grid:

  1. CSS Grid is a 2-dimensional system, meaning it can handle both columns and rows
    Example
    Header
    Body
    Footer

  2. Layout allows us to align components into columns and rows

  3. Approach mainly focus on Layout other than content

  4. Grid is used for large scale where there no linear display

Discussion (0)