.grid{
    display: grid;    
}

.container{
    grid-template-columns: repeat(12, 1fr);
    grid-gap:20px;
    width: 90%;
    margin: 0 auto;
}
/*
.container div{background-color: orangered}
*/

/* UMA COLUNA */
.col-1-2{ grid-column: 1 / 2; }
.col-2-3{ grid-column: 2 / 3; }
.col-3-4{ grid-column: 3 / 4; }
.col-4-5{ grid-column: 4 / 5; }
.col-5-6{ grid-column: 5 / 6; }
.col-6-7{ grid-column: 6 / 7; }
.col-7-8{ grid-column: 7 / 8; }
.col-8-9{ grid-column: 8 / 9; }
.col-9-10{ grid-column: 9 / 10; }
.col-10-11{ grid-column: 10 / 11; }
.col-11-12{ grid-column: 11 / 12; }
.col-12-13{ grid-column: 12 / 13; }

/* DUAS COLUNAS */
.col-1-3{ grid-column: 1 / 3; }
.col-2-4{ grid-column: 2 / 4; }
.col-3-5{ grid-column: 3 / 5; }
.col-4-6{ grid-column: 4 / 6; }
.col-5-7{ grid-column: 5 / 7; }
.col-6-8{ grid-column: 6 / 8; }
.col-7-9{ grid-column: 7 / 9; }
.col-8-10{ grid-column: 8 / 10; }
.col-9-11{ grid-column: 9 / 11; }
.col-10-12{ grid-column: 10 / 12; }
.col-11-13{ grid-column: 11 / 13; }

/* TRÊS COLUNAS */
.col-1-4{ grid-column: 1 / 4; }/*col-3-1*/
.col-2-5{ grid-column: 2 / 5; }
.col-3-6{ grid-column: 3 / 6; }
.col-4-7{ grid-column: 4 / 7; }/*col-3-4*/
.col-5-8{ grid-column: 5 / 8; }
.col-6-9{ grid-column: 6 / 9; }
.col-7-10{ grid-column: 7 / 10; }/*col-3-7*/
.col-8-11{ grid-column: 8 / 11; }
.col-9-12{ grid-column: 9 / 12; }
.col-10-13{ grid-column: 10 / 13; }/*col-3-10*/

/* QUATRO COLUNAS */
.col-1-5{ grid-column: 1 / 5; }/*col-4-1*/
.col-2-6{ grid-column: 2 / 6; }
.col-3-7{ grid-column: 3 / 7; }
.col-4-8{ grid-column: 4 / 8; }
.col-5-9{ grid-column: 5 / 9; }/*col-4-5*/
.col-6-10{ grid-column: 6 / 10; }
.col-7-11{ grid-column: 7 / 11; }
.col-8-12{ grid-column: 8 / 12; }
.col-9-13{ grid-column: 9 / 13; }/*col-4-9*/

/* CINCO COLUNAS */
.col-1-6{ grid-column: 1 / 6; }
.col-2-7{ grid-column: 2 / 7; }
.col-3-8{ grid-column: 3 / 8; }
.col-4-9{ grid-column: 4 / 9; }
.col-5-10{ grid-column: 5 / 10; }
.col-6-11{ grid-column: 6 / 11; }
.col-7-12{ grid-column: 7 / 12; }
.col-8-13{ grid-column: 8 / 13; }

/* SEIS COLUNAS */
.col-1-7{ grid-column: 1 / 7; }
.col-2-8{ grid-column: 2 / 8; }
.col-3-9{ grid-column: 3 / 9; }
.col-4-10{ grid-column: 4 / 10; }
.col-5-11{ grid-column: 5 / 11; }
.col-6-12{ grid-column: 6 / 12; }
.col-7-13{ grid-column: 7 / 13; }

/* SETE COLUNAS */
.col-1-8{ grid-column: 1 / 8; }
.col-2-9{ grid-column: 2 / 9; }
.col-3-10{ grid-column: 3 / 10; }
.col-4-11{ grid-column: 4 / 11; }
.col-5-12{ grid-column: 5 / 12; }
.col-6-13{ grid-column: 6 / 13; }

/* OITO COLUNAS */
.col-1-9{ grid-column: 1 / 9; }
.col-2-10{ grid-column: 2 / 10; }
.col-3-11{ grid-column: 3 / 11; }
.col-4-12{ grid-column: 4 / 12;}
.col-5-13{ grid-column: 5 / 13; }

/* NOVE COLUNAS */
.col-1-10{ grid-column: 1 / 10; }
.col-2-11{ grid-column: 2 / 11; }
.col-3-12{ grid-column: 3 / 12; }
.col-4-13{ grid-column: 4 / 13; }

/* DEZ COLUNAS */
.col-1-11{ grid-column: 1 / 11; }
.col-2-12{ grid-column: 2 / 12; }
.col-3-13{ grid-column: 3 / 13; }

/* ONZE COLUNAS */
.col-1-12{ grid-column: 1 / 12; }
.col-2-13{ grid-column: 2 / 13; }

/* DOZE COLUNAS */
.col-1-13{ grid-column: 1 / 13; }/*col-12-1*/


 /*
@media (max-width:768px){
    
    div[class*="col"]{ grid-column: 1 / 13; }   Transformando todas as colunas em 13 

}
*/