View Single Post
turtle
Lord of the Rant.
Formerly turtle2472
 
Join Date: Mar 2005
Location: Upstate South Carolina
 
2022-07-19, 08:16

I leaned that I can display images in a responsive grid thanks to W3Schools but it isn't exactly what I'm after. What I'm after is a list of images that go from single column up to 600px, then double column up to 1200px and finally three columns beyond that.

The images are all pulled from internal addresses via URL.
Code:
<!DOCTYPE html> <html> <style> * { box-sizing: border-box; } body { margin: 0; font-family: Arial; } .header { text-align: center; padding: 6px; } .row { display: flex; flex-wrap: wrap; padding: 0 4px; } /* Create four equal columns that sits next to each other */ .column { flex: 33%; max-width: 33%; 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: 1200px) { .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%; } } </style> <body> <!-- Header --> <div class="header"> <h1>Camera Snapshot Grid</h1> </div> <!-- Photo Grid --> <div class="row"> <div class="column"> <img src="http://10.10.0.150/snap.jpg" style="width:100%"> <img src="http://10.10.0.156/snap.jpg" style="width:100%"> <img src="http://10.10.0.158/snap.jpg" style="width:100%"> </div> <div class="column"> <img src="http://10.10.0.151/snap.jpg" style="width:100%"> <img src="http://10.10.0.157/snap.jpg" style="width:100%"> <img src="http://10.10.0.152/snap.jpg" style="width:100%"> </div> <div class="column"> <img src="http://10.10.0.153/snap.jpg" style="width:100%"> <img src="http://10.10.0.155/snap.jpg" style="width:100%"> <img src="http://10.10.0.154/snap.jpg" style="width:100%"> <img src="https://my.domain.com/snap.jpg" style="width:100%"> </div> </div> </body> </html>
The challenge with the current setup is if it goes two abreast then the images don't fill in across the bottom right. The third div column is under the first meaning there is a ton of white space next to it/under the second column.

If I can make it so it just fills in one image at a time it would balance out the bottom when in two column "mode". Anyone able to help me with this layout?

Louis L'Amour, “To make democracy work, we must be a nation of participants, not simply observers. One who does not vote has no right to complain.”
Visit our archived Minecraft world! | Maybe someday I'll proof read, until then deal with it.
  quote