.is-grid {
    display: grid;
    padding: 10px;
}

.is-grid>* {
    margin: 10px;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .is-grid {
        grid-template-columns: 1fr;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .is-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 1024px) {
    .is-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media only screen and (min-width: 1500px) {
    .is-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media only screen and (min-width: 1700px) {
    .is-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media only screen and (min-width: 2000px) {
    .is-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}