The Power of CSS Grid

Why CSS Grid?

CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay out items in rows and columns.

One of the most powerful features is named grid areas.

css

              .container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}
            

While Flexbox is one-dimensional (row OR column), Grid is two-dimensional.

"Grid is for layout, Flexbox is for alignment."

Grid makes media queries much simpler.