Html Image grid depending on variable

Question

So in my html file I have this variable: {{ images.images_total }}

And I want to create a grid with 3 rows

First row has 3 images, each image occupies 33% width

Second row has 2 images, one image 33 other 66 width%

Third row has 1 image occupying full width

This is the layout, now imagine my variable is 2 , it only fills the first row, if it is 5 it fills until the second, if it's more than 6 the process repeats, any way to do this?

Answer 1

This is a html and css-only solution using the :nth-child css selector.

The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent.

n can be a number, a keyword, or a formula.

[...]

Using a formula (an + b). Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.

Quoted from: https://www.w3schools.com/cssref/sel_nth-child.asp

So this css code gives the first 4 images 33% width, the 5th gets 66% width and the 6th gets 100% width. Then it loops over and does the same for the next 6 images, and so on.

I used flexbox as an easy way to put the images in a row next to each other and wrap around whenever necessary.

Using this approach, you just have to drop your images into a div with the class image-row and they will be sized automatically.

 .image-row { display: flex; flex-flow: row wrap; } .image-row > :nth-child(6n+1), .image-row > :nth-child(6n+4) { width: 34%; } .image-row > :nth-child(6n+2), .image-row > :nth-child(6n+3) { width: 33%; } .image-row > :nth-child(6n+5) { width: 66%; } .image-row > :nth-child(6n) { width: 100%; } 

 <div class="image-row"> <img src="https://via.placeholder.com/150"/> <img src="https://via.placeholder.com/150"/> <img src="https://via.placeholder.com/150"/> <img src="https://via.placeholder.com/150"/> <img src="https://via.placeholder.com/150"/> <img src="https://via.placeholder.com/150"/> <img src="https://via.placeholder.com/150"/> <img src="https://via.placeholder.com/150"/> <img src="https://via.placeholder.com/150"/> <img src="https://via.placeholder.com/150"/> <img src="https://via.placeholder.com/150"/> <img src="https://via.placeholder.com/150"/> <img src="https://via.placeholder.com/150"/> <img src="https://via.placeholder.com/150"/> <img src="https://via.placeholder.com/150"/> <img src="https://via.placeholder.com/150"/> <img src="https://via.placeholder.com/150"/> </div> 

Credit for placeholder image: https://placeholder.com/

EDIT: Updated the snippet so it works not only for images but for all children of .image-row . This way you can put the image in a form or link. Just make sure to give the image 100% width if it is contained in something else.

Also I gave the first element of the first line and the first element of the second line a width of 34% instead of 33% so the width of all pictures in those rows adds up to 100%.