How TO - Responsive Image Grid
Learn how to create a Responsive Image Grid.
Responsive Image Grid
Learn how to create an image gallery that varies between four, two or full-width images, depending on screen size:
Creating an Image Grid
Step 1) Add HTML:
Example
<div class="row">
<div class="column">
<img
src=/proxy/https/www.w3schools.com/howto/"wedding.jpg">%3Cbr> <img src=/proxy/https/www.w3schools.com/howto/"rocks.jpg">%3Cbr>
<img src=/proxy/https/www.w3schools.com/howto/"falls2.jpg">%3Cbr> <img src=/proxy/https/www.w3schools.com/howto/"paris.jpg">%3Cbr>
<img src=/proxy/https/www.w3schools.com/howto/"nature.jpg">%3Cbr> <img src=/proxy/https/www.w3schools.com/howto/"mist.jpg">%3Cbr>
<img src=/proxy/https/www.w3schools.com/howto/"paris.jpg">%3Cbr> </div>
<div
class="column">
<img src=/proxy/https/www.w3schools.com/howto/"underwater.jpg">%3Cbr>
<img src=/proxy/https/www.w3schools.com/howto/"ocean.jpg">%3Cbr> <img src=/proxy/https/www.w3schools.com/howto/"wedding.jpg">%3Cbr>
<img src=/proxy/https/www.w3schools.com/howto/"mountainskies.jpg">%3Cbr> <img src=/proxy/https/www.w3schools.com/howto/"rocks.jpg">%3Cbr>
<img src=/proxy/https/www.w3schools.com/howto/"underwater.jpg">%3Cbr> </div>
<div
class="column">
<img src=/proxy/https/www.w3schools.com/howto/"wedding.jpg">%3Cbr>
<img src=/proxy/https/www.w3schools.com/howto/"rocks.jpg">%3Cbr> <img src=/proxy/https/www.w3schools.com/howto/"falls2.jpg">%3Cbr>
<img src=/proxy/https/www.w3schools.com/howto/"paris.jpg">%3Cbr> <img src=/proxy/https/www.w3schools.com/howto/"nature.jpg">%3Cbr>
<img src=/proxy/https/www.w3schools.com/howto/"mist.jpg">%3Cbr> <img src=/proxy/https/www.w3schools.com/howto/"paris.jpg">%3Cbr>
</div>
<div class="column">
<img src=/proxy/https/www.w3schools.com/howto/"underwater.jpg">%3Cbr>
<img src=/proxy/https/www.w3schools.com/howto/"ocean.jpg">%3Cbr> <img src=/proxy/https/www.w3schools.com/howto/"wedding.jpg">%3Cbr>
<img src=/proxy/https/www.w3schools.com/howto/"mountainskies.jpg">%3Cbr> <img src=/proxy/https/www.w3schools.com/howto/"rocks.jpg">%3Cbr>
<img src=/proxy/https/www.w3schools.com/howto/"underwater.jpg">%3Cbr> </div>
</div>
Step 2) Add CSS:
Use CSS Flexbox to create a responsive layout:
Example
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
/*
Create four equal columns that sits next to each other */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
/* Responsive layout - makes a two
column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column {
flex:
50%;
max-width: 50%;
}
}
/*
Responsive layout - makes the two columns stack on top of each other instead
of next to each other */
@media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
Try it Yourself »
Tip: Go to our Image Grid Tutorial to learn how to create a clickable grid that varies between columns.
Tip: Go to our CSS Flexbox Tutorial to learn more about the flexible box layout module.
