CSS Grid with Float Fallback

Sample CSS for a 3-column grid with the number of columns changing to 2 from 768px & below and to 1 from 500px and below with floats fallback for non-supporting (read, outdated like IE) browsers.

The CSS using CSS Grid for all modern browsers with float fallback for IE:

.videos {
    display: grid;
    justify-items: center;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 40px;
}

.video {
    float: left;
    width: 30.8641975309%;
    margin-left: 3.7037037037%;
    margin-bottom: 40px;
}

.video:nth-of-type(3n+1) {
    margin-left: 0;
    clear: left;
}

@supports (grid-area: auto) {

    .video {
        width: auto;
        margin-left: 0;
        margin-bottom: 0;
    }

}

@media only screen and (max-width: 768px) {

    .videos {
        grid-template-columns: 1fr 1fr;
        grid-gap: 30px;
    }

    .video {
        width: 47.8813559322%;
        margin-left: 4.2372881356%;
        margin-bottom: 30px;
    }

    .video:nth-of-type(3n+1) {
        margin-left: 4.2372881356%;
        clear: none;
    }

    .video:nth-of-type(2n+1) {
        margin-left: 0;
        clear: left;
    }

    @supports (grid-area: auto) {

        .video {
            width: auto;
            margin-left: 0;
            margin-bottom: 0;
        }

        .video:nth-of-type(3n+1) {
            margin-left: 0;
        }

    }

}

@media only screen and (max-width: 500px) {

    .videos {
        text-align: center;
        grid-template-columns: 1fr;
    }

    .video {
        width: 100%;
        margin-left: 0;
    }

    .video:nth-of-type(3n+1) {
        margin-left: 0;
    }

    .video-title {
        max-width: 300px;
        margin: 10px auto;
    }

}
This site uses cookies to offer you a better browsing experience. By browsing this website, you agree to our use of cookies.