.container-1 
{
display: grid;
grid-template-columns: 1fr 1fr 
minmax(100px, 1fr); 
grid-template-rows: 
repeat(4, minmax(50px, 1fr));
grid-gap: 10px;
}

.container__box 
{height: 150px;}

.grid__box-1, .grid__box-2, 
.grid__box-3, .grid__box-4, 
.grid__box-5, .grid__box-6,
.grid__box-7, .grid__box-8, 
.grid__box-9 
{width: 50%;}

.grid__box-1, .grid__box-2, 
.grid__box-3 
{justify-self: end;}

.grid__box-4, .grid__box-5, 
.grid__box-6 
{justify-self: start;}

.grid__box-7, .grid__box-8, 
.grid__box-9 
{justify-self: center;}

.grid__box-10, .grid__box-11, 
.grid__box-12 
{width: 100%;
justify-self: stretch;}

.container-2 
{
display: grid;
grid-template-columns: 
1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 
minmax(50px, 1fr);
grid-template-rows: 
1fr 1fr 1fr 1fr 1fr 1fr 1fr 
minmax(50px, 1fr);
grid-gap: 10px;
}

.cont_grid__box-1 
{grid-column: 3 / 5; grid-row: 1 / 3;}
.cont_grid__box-2 
{grid-column: 7 / 9; grid-row: 1 / 3;}
.cont_grid__box-3 
{grid-column: 11 / 13; grid-row: 1 / 3;}
.cont_grid__box-4 
{grid-column: 1 / 3; grid-row: 3 / 5;}
.cont_grid__box-5 
{grid-column: 5 / 7; grid-row: 3 / 5;}
.cont_grid__box-6 
{grid-column: 9 / 11; grid-row: 3 / 5;}
.cont_grid__box-7 
{grid-column: 2 / 4; grid-row: 5 / 7;}
.cont_grid__box-8 
{grid-column: 6 / 8; grid-row: 5 / 7;}
.cont_grid__box-9 
{grid-column: 10 / 12; grid-row: 5 / 7;}
.cont_grid__box-10 
{grid-column: 1 / 5; grid-row: 7 / 9;}
.cont_grid__box-11 
{grid-column: 5 / 9; grid-row: 7 / 9;}
.cont_grid__box-12 
{grid-column: 9 / 13; grid-row: 7 / 9;}