TechQA.

Linked Questions

Popular Questions

Html Image grid depending on variable

Asked by At

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?

html css
Original Q&A

1 Answers

1
TheBlackIPs On Best Solutions

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%.

Related Questions