Grid Template CSS

/* RESET PADRÃO DE CSS */
* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

/* BODY CSS */
body {
  background-color: #111111;
  color: #fafafa;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
}

/* CSS DO MENU QUE É SÓ DE EXEMPLO, IGNORE */
.menu {
  height: 60px;
  width: 100%;
  background-color: #292929;
  display: flex;
  align-items: center;
}

.menu h1 {
  font-size: 20px;
  text-transform: uppercase;
}

/* CORES DE FUNDO PARA EXEMPLO */
.green {
  background-color: #16a085;
}
.blue {
  background-color: #2980b9;
}
.purple {
  background-color: #8e44ad;
}
.red {
  background-color: #c0392b;
}
.orange {
  background-color: #f39c12;
}
.yellow {
  background-color: #f1c40f;
}

/* CONTAINER PAI DOS BOX */
.container {
  width: 1000px; /* TAMANHO DO CONTAINER */
  margin: 0 auto; /* ALINHAMENTO AO CENTRO */
}

/* CSS DO GRID */
.grid-template {
  margin: 20px auto 0; /* ESPAÇAMENTO ENTRE AS DIVS */

  /*
  * INFORMA QUE ESSA DIV SERÁ DO TIPO GRID.
  */
  display: grid;

  /*
  * O GRID TEMPLATE CONSISTE EM PEGAR O VALOR TOTAL DO CONTAINER
  * NO CASO 1000px E DIVIDIR ENTRE OS BOXs QUE CONTEM DENTRO DESSE GRID TEMPLATE
  * 1000px / 4 REPETIÇÕES = 250px CADA BOX.
  * 1fr (_FRAÇÃO_) = 250px
  * SE ALTERAR PARA 5 REPETIÇÕES 1fr SERA IGUAL A 200px NESSE EXEMPLO
  */
  grid-template-columns: repeat(4, 1fr);

  /*
  * O GRID GAP CONSISTE EM DÁ UM ESPAÇAMENTO INTERNO DO GRID ENTRE OS BOX
  * NO CASO 10px ENTRE O BOX LATERAL E O BOX INFERIOR SE EXISTIR
  ** APAGUE O GRID GAP E OS BOX VÃO OCUPAR TODO O ESPAÇO
  */
  grid-gap: 10px;
}

/*
 * A BOX EM SI NÃO PRECISA DE DEFINIÇÃO DE LARGURA, PORQUE ELA
 * ERDA A LARGURA DO GRID TEMPLATE
 */
.box {
  height: 220px;
}

/*
 * ESSE MEDIA QUERY VERIFICA SE O DISPOSITIVO TEM UM MAXIMO DE 1023px
 * E FAZ O AJUSTE, NO CASO RESOLUÇÕES DE TABLETS
 */
@media screen and (max-width: 1023px) {
  .container {
    width: 100%; /* OCUPA 100% DA TELA DO DISPOSITIVO */
  }

  .grid-template {
    /*
     * AJUSTA O GRID TEMPLETE PARA QUE TENHA APENAS 2 REPETIÇÕES
     * E QUE CADA UMA OCUPE 50% DO ESPAÇO DISPONÍVEL
     * 1fr NESSE EXEMPLO EQUIVALE A 50% DE 95% QUE FOI DEFINIDO NO CONTAINER PAI
     */
    grid-template-columns: repeat(2, 1fr);
  }

  /* PRECISAMOS INFORMAR O TAMANHO DA BOX NESSE EXEMPLO,
     PARA QUE ELA OCUPE TODO O ESPAÇO DISPONÍVEL */
  .box {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .container {
    width: 100%; /* OCUPA 100% DA TELA DO DISPOSITIVO */
  }

  .grid-template {
    /*
     * AJUSTA O GRID TEMPLETE PARA QUE TENHA APENAS 1 REPETIÇÃO
     * E QUE CADA UMA OCUPE 100% DO ESPAÇO DISPONÍVEL
     * 1fr NESSE EXEMPLO EQUIVALE A 100% DE 95% QUE FOI DEFINIDO NO CONTAINER PAI
     */
    grid-template-columns: repeat(1, 1fr);
  }
}