CSS Grid with Float Dự phòng

CSS mẫu cho lưới 3 cột với số cột thay đổi thành 2 từ 768px trở xuống và thành 1 từ 500px trở xuống với dự phòng float cho các trình duyệt không hỗ trợ (đọc, lỗi thời như IE).

CSS sử dụng CSS Grid cho tất cả các trình duyệt hiện đại có dự phòng float cho 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;
    }

}