Sridhar Katakam

Genesis and WordPress Tutorials

CSS Grid with Float Fallback

by 3 Comments

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.

Given this HTML:

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;
    }

}

Soulver screenshots showing how I obtained the width and left margin percentage values (tested on Genesis Sample 2.6.0 full-width content page with 100% content width):

    • Not really.

      This is for those who prefer to use CSS Grid as it is the future.

      The float fallback is there to ensure that it works/appears same (more or less) in older versions of IE.

      Reply

  • Wow works like a charm. Thank you. I have been looking at various grid gallery plugins for my Youtube channel and decided to check your site before I choose one and voila your tutorial was a God sent. God bless you for making this so simple and easy.

    I have a couple of questions.
    1. Is there an ideal number of videos that can be added to a page before it gets too heavy to load?

    You also have a tutorial for a grid gallery for videos with ACF pro. Is there is a significant difference between the two methods when it comes to page loading speed, user experience, ease of adding videos to the grid in future etc?

    This seems like a very easy method and other method seems to require a pro version as well as some work initially. But if that is good for the long run, I would like to go with that.

    Thank you!

    Reply
    • >