CSS Grids

New value for the CSS display property
Used for creating a two dimensional layout

Whenever you are setting display: grid on an HTML element, you are really just talking about how you want to position the children of that element.

We can set the display property on the container and all of it's child elements will automatically be positioned and sized by the CSS Grid properties.
Getting Started with CSS Grids video

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 1fr means 1 fraction */
  grid-template-columns: repeat(3, 1fr);
  /* both these values do the same thing */
  grid-template-rows: auto;
}

Named Grid Areas

In addition to providing sizes or fractions for all the items, we can also define placement with names.
The sizes defined with grid-template-columns and grid-template-rows will control the relative sizes of the areas defined.

.container {
  display: grid;
  grid-template-areas:
    "nav nav"
    "mast mast"
    "main side"
    "foot foot";
}
nav {
  grid-area: nav;
}
header {
  grid-area: mast;
}
main {
  grid-area: main;
}
sidebar {
  grid-area: side;
}
footer {
  grid-area: foot;
}

watch the videos on uneven grid areas and overlapping grid areas
Here is an Excellent free online course on CSS Grid CSSGrid.io
Visual Guide to most CSS Grid properties

More Resources