12Grid.css

*{
    box-sizing: border-box;
}

html{
    background: url(./back.jpg) no-repeat center fixed;
    background-size: cover;    
}

.mainContainer {
  display: grid;
  grid-gap: 4px;
}
.box {
  color: red;
  font-size: 25px;
  padding: 0;
  margin: 0;
  background: black;
  text-align: center;
}
.box:nth-child(1) {
  grid-column: span 12;
  
}

.box:nth-child(2), 
.box:nth-child(3) {
  grid-column: span 6;
  }
.box:nth-child(4),
.box:nth-child(5),
.box:nth-child(6) {
  grid-column: span 4;
  }
.box:nth-child(7),
.box:nth-child(8),
.box:nth-child(9),
.box:nth-child(10) {
  grid-column: span 3;
  }
.box:nth-child(11),
.box:nth-child(12),
.box:nth-child(13),
.box:nth-child(14),
.box:nth-child(15),
.box:nth-child(16) {
  grid-column: span 2;
  }