.css-grid {
    display: grid;
    grid-template-rows: repeat(3, 180px);
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5px;
    margin: 20px auto;
    max-width: 1000px;
}

    .css-grid > .item {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

.item:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

.item:nth-child(2) {
    grid-column: 2 / 4;
    grid-row: 1 / 3;
}

.item:nth-child(3) {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

.item:nth-child(4) {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
}

.item:nth-child(5) {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
}

@media only screen and (max-width: 480px) {
    .css-grid {
        display: grid;
        grid-template-rows: repeat(4, 80px);
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 5px;
        margin: 20px auto;
        max-width: 1000px;
    }
}


/*Isotope*/
/* ---- grid ---- */

.grid {
    background: #DDD;
    max-width: 1200px;
}

    /* clear fix */
    .grid:after {
        content: '';
        display: block;
        clear: both;
    }

/* ---- .grid-item ---- */

.grid-item {
    float: left;
    width: 100px;
    height: 100px;
    background: #0D8;
    border: 2px solid #333;
    border-color: hsla(0, 0%, 0%, 0.7);
}