Grid

Grid basic

Example

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Grid template layout

Define named areas in a grid with a pattern that must be a rectangle to be valid.

Video

Mozilla dev docs

Example

.a {
  grid-template: a
}

grid-template-areas: 
            "a a a"
            "b c c"
            "b c c";

grid-template-areas: 
            "b b a"
            "b b c"
            "b b c";

grid-template-areas: 
            "a"
            "b"
            "c";