HTML5 - Cajas con estilo grid

Cajas con estilo grid

HTML5

<!-- CAJAS GRID -->

    <div class="boxes">

        <div class="box-1">#1</div>

        <div class="box-1">#2</div>

        <div class="box-1">#3</div>

        <div class="box-1">#4</div>

    </div>

CSS3

/* CAJAS GRID */

.boxes{

    width: 100%;

    height: auto;

    background: #ffffff;

    display:grid;

    grid-template-columns: repeat(4, 1fr); /* o 1fr x 4*/

    grid-column-gap: 20px;

    grid-row-gap: 20px;

    padding: 20px;

    background: #8bf9ff;

}

.box-1{

    width: 100%;

    height: 350px;

    display: flex;

    align-items: center;

    justify-content: center;

   

}

/** BACKGROUND DE CAJAS **/

.box-1:nth-child(1){

    background: red;

    background: url(https://fraichemx.vtexassets.com/arquivos/ids/155709-600-auto?v=638833572319200000&width=600&height=auto&aspect=true) center right /cover;

}

.box-1:nth-child(2){

    background: green;

    background: url(https://fraichemx.vtexassets.com/arquivos/ids/155697-600-auto?v=638833572243000000&width=600&height=auto&aspect=true) center center /cover;

}

.box-1:nth-child(3){

    background: yellowgreen;

    background: url(https://fraichemx.vtexassets.com/arquivos/ids/155741-600-auto?v=638833572522170000&width=600&height=auto&aspect=true) center center /cover;

}

.box-1:nth-child(4){

    background: orange;

    background: url(https://fraichemx.vtexassets.com/arquivos/ids/155770-600-auto?v=638833572692970000&width=600&height=auto&aspect=true) center center /cover;

}

Solo copia y pega