GRID CSS Basics

grid.scss

.parentElement {
  display: grid; // yeah okay
  grid-template-columns: repeat(12, 1fr); // make 12 columns with 1 fraction each
  //alt: grid-template-columns: 3fr 1fr 1fr 1fr 3fr; // make a column 3fr wide at the beginning and end (px % vw allowed)
  grid-auto-rows: minmax(5vh, auto); // make each row min 5vh in height otherwise apply autogrow
  grid-gap: 20px; // add grid
}
.childItem {
  grid-column: 2/6; // .childItem runs from axis 2 to axis 6
  @include smDown {
    grid-column: 4; // on small devices, make .childItem just 4 columns wide starting at axis 1 (just the very left by default)
  }
}