css-grid

align.css

.container {
  // one line
  /* 
    auto
    normal
    start
    end
    center
    stretch
    baseline
    first baseline
    last baseline
  */
  justify-items: start; // horizontal align; not stretched, only align, default stretch; 
  align-items: start; // vertical align
  
  //for multitrack
  /*
    normal
    start
    end
    center
    stretch
    space-around
    space-between
    space-evenly
    baseline
    first baseline
    last baseline
  */
  justify-content: start;
  align-content: start;
}

.item {
  /* 
    auto
    normal
    start
    end
    center
    stretch
    baseline
    first baseline
    last baseline
  */
  justify-self: start;
  align-self: start; // item vertical align
}

areas.css

.container {
  display: grid;
  grid-tempalate-areas: 
    '. header header header .'
    '. left content right .'
    'footer left footer footer footer';
}
.header {
  grid-area: header;
}
.left {
  grid-area: left;
}
...

auto-fill.css

.container {
  display: grid;
  grid-template-colums: repeat(auto-fill, minmax(150px, 1rf)); // first decrease to min then next row
  // auto-fill - empty space for virtual items
}

auto-fit.css

.container {
  display: grid;
  grid-template-colums: repeat(auto-fit, minmax(150px, 1rf)); // first decrease to min then next row
  // auto-fit - items max fit line, without empty virtual items
}

flow.css

.container {
  display: grid;
  grid-template-colums: minmax(150px, 250px) repeat(2, 1fr 2 fr);
  grid-auto-rows: minmax(100px, auto);
  grid-auto-flow: column; // direction
  grid-template-rows: 160px 160px 160px;
}

position.css

.item {
  grid-column: 1 / -1; // whole row
}