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