Creating a responsive image grid
I am using the CSS flex on my pages that have a grid of images.
I would hazard a guess that this is somewhat superceeded by the W3 Framework Responsive classes.
This is seen on my Parish Council website - here the responsive behaviour is such that the three column grid stays as three and the menu overlay changes and then changes again when the screen wide is of mobile nature.
If the non-framework solution is in anyway better the coding is a lot more straight forward when it comes to adding images. The Framework places the images in w3-third containers.
The code
CSS Code for flex
.rowr {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; IE10
flex-wrap: wrap;
padding: 0 4px;
}
Create four equal columns that sits next to each other
.columnr {
-ms-flex: 25%; IE10
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.columnr 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) {
.columnr {
-ms-flex: 50%;
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) {
.columnr {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
When I looked at various display properties I didn't cover the flex property display: flex or the flex-wrap Property.
HTML Code for flex
<div class="rowr">
<div class="columnr">
<img src="http://tempusfugit.me.uk/images/organ_6.JPG" style="width:100%; cursor:zoom-in"
onclick="location.href = 'https://tempusfugit.me.uk/images/organ_6.JPG';">
<img src="http://tempusfugit.me.uk/images/organ-3.JPG" style="width:100%; cursor:zoom-in"
onclick="location.href = 'https://tempusfugit.me.uk/images/organ-3.JPG';">
.........
More images ........
.........
More Rows and columns
close divs
I added the complication on the image gris of an onclick to open the image on its own in the current browser window.