User Name
Password
AppleNova Forums » Programmer's Nook »

I need help figuring out a grid layout.


Register Members List Calendar Search FAQ Posting Guidelines
I need help figuring out a grid layout.
Thread Tools
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
chucker
 
Join Date: May 2004
Location: near Bremen, Germany
Send a message via ICQ to chucker Send a message via AIM to chucker Send a message via MSN to chucker Send a message via Yahoo to chucker Send a message via Skype™ to chucker 
2022-07-19, 11:08

Heh heh, abreast.
  quote
turtle
Lord of the Rant.
Formerly turtle2472
 
Join Date: Mar 2005
Location: Upstate South Carolina
 
2022-07-19, 11:42



As a military guy it is a normal word. Reading you write it makes me see the humor in it.
  quote
chucker
 
Join Date: May 2004
Location: near Bremen, Germany
Send a message via ICQ to chucker Send a message via AIM to chucker Send a message via MSN to chucker Send a message via Yahoo to chucker Send a message via Skype™ to chucker 
2022-07-19, 14:24

So I'm a bit confused by what kind of layout you want to do here. Your comments mention four columns, but there only seem to be three?

Also, that code creates a flex layout, but you say grid layout.

The comments seem to suggest you want… four columns if wider than 1200px, two if wider than 600px, one if narrower?
  quote
chucker
 
Join Date: May 2004
Location: near Bremen, Germany
Send a message via ICQ to chucker Send a message via AIM to chucker Send a message via MSN to chucker Send a message via Yahoo to chucker Send a message via Skype™ to chucker 
2022-07-19, 14:29

For example:

Code:
<!DOCTYPE html> <html> <style> .container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; } @media screen and (max-width: 1200px) { .container { grid-template-columns: 1fr 1fr; } } @media screen and (max-width: 600px) { .container { grid-template-columns: 1fr; } } </style> <body> <!-- Header --> <div class="header"> <h1>Camera Snapshot Grid</h1> </div> <!-- Photo Grid --> <div class="container"> <div style="width:100%; background:red">&nbsp</div> <div style="width:100%; background:blue">&nbsp</div> <div style="width:100%; background:green">&nbsp</div> <div style="width:100%; background:red">&nbsp</div> <div style="width:100%; background:blue">&nbsp</div> <div style="width:100%; background:green">&nbsp</div> <div style="width:100%; background:red">&nbsp</div> <div style="width:100%; background:blue">&nbsp</div> <div style="width:100%; background:green">&nbsp</div> </div> </body> </html>
This will show a grid with four columns if wide enough, otherwise two, otherwise one.
  quote
turtle
Lord of the Rant.
Formerly turtle2472
 
Join Date: Mar 2005
Location: Upstate South Carolina
 
2022-07-19, 14:31

OK, the comments are where I just edited their sample and didn't clean up the notes to match.

To be clear, I have a little bit of a clue but that is about it. I take sample code and modify it hoping to achieve my goal.

What I'm really after is having the images all just fill in up to three columns wide. I'mma see if I can draw a picture to represent what I'm after....

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
chucker
 
Join Date: May 2004
Location: near Bremen, Germany
Send a message via ICQ to chucker Send a message via AIM to chucker Send a message via MSN to chucker Send a message via Yahoo to chucker Send a message via Skype™ to chucker 
2022-07-19, 14:33

So you just always want a 3x3 grid? That's what I originally assumed.

Code:
<!DOCTYPE html> <html> <style> .container { display: grid; grid-template-columns: 1fr 1fr 1fr; } </style> <body> <!-- Header --> <div class="header"> <h1>Camera Snapshot Grid</h1> </div> <!-- Photo Grid --> <div class="container"> <div style="width:100%; background:red">&nbsp</div> <div style="width:100%; background:blue">&nbsp</div> <div style="width:100%; background:green">&nbsp</div> <div style="width:100%; background:yellow">&nbsp</div> <div style="width:100%; background:red">&nbsp</div> <div style="width:100%; background:blue">&nbsp</div> <div style="width:100%; background:green">&nbsp</div> <div style="width:100%; background:yellow">&nbsp</div> <div style="width:100%; background:red">&nbsp</div> </div> </body> </html>
  quote
turtle
Lord of the Rant.
Formerly turtle2472
 
Join Date: Mar 2005
Location: Upstate South Carolina
 
2022-07-19, 14:36

Like this:


Of course, if I add more then it would just continue the pattern.
  quote
turtle
Lord of the Rant.
Formerly turtle2472
 
Join Date: Mar 2005
Location: Upstate South Carolina
 
2022-07-19, 14:38

Sorry, I do was responsive from 1, 2 or three columns based on 1 up to 600px, 2 based on up to 1200px and 3 for anything larger.
  quote
chucker
 
Join Date: May 2004
Location: near Bremen, Germany
Send a message via ICQ to chucker Send a message via AIM to chucker Send a message via MSN to chucker Send a message via Yahoo to chucker Send a message via Skype™ to chucker 
2022-07-19, 14:40

Yeah, so close to my first example.

Hop into Safari → Develop → Show Snippet Editor, and paste this:

Code:
<!DOCTYPE html> <html> <style> .container { display: grid; grid-template-columns: 1fr 1fr 1fr; } @media screen and (max-width: 1200px) { .container { grid-template-columns: 1fr 1fr; } } @media screen and (max-width: 600px) { .container { grid-template-columns: 1fr; } } </style> <body> <!-- Header --> <div class="header"> <h1>Camera Snapshot Grid</h1> </div> <!-- Photo Grid --> <div class="container"> <div style="width:100%; background:#999">1</div> <div style="width:100%; background:#bbb">2</div> <div style="width:100%; background:#ddd">3</div> <div style="width:100%; background:#999">4</div> <div style="width:100%; background:#bbb">5</div> <div style="width:100%; background:#ddd">6</div> <div style="width:100%; background:#999">7</div> <div style="width:100%; background:#bbb">8</div> <div style="width:100%; background:#ddd">9</div> <div style="width:100%; background:#999">10</div> </div> </body> </html>
Try resizing the window.
  quote
turtle
Lord of the Rant.
Formerly turtle2472
 
Join Date: Mar 2005
Location: Upstate South Carolina
 
2022-07-19, 14:48

Yes! That is what I'm after! Thank you very much.
  quote
noleli2
Senior Member
 
Join Date: May 2004
Location: Chicago
 
2022-09-12, 17:55

I’m super late to this (I’m not as active here as I used to be), but the beauty of `grid` is that it can do automatic layouts without needing to resort to media queries.

By saying you want a single column up to 600px, you’re essentially saying that you’re ok with a minimum photo width of 300px, because that’s what it’ll be once there are 2 columns. So the magic line is

Code:
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
This will create as many columns as necessary to keep the photo at least 300px wide, but can’t be wider than all of the remaining grid container space. (The difference between `auto-fit` and `auto-fill` is subtle, but in this case it doesn’t matter.)

Because you also didn’t want more than 3 columns, I set a `max-width` on the grid container.

Full example:

Code:
<!DOCTYPE html> <html> <style> body { font-family: sans-serif; } .container { --min-photo-width: 300px; --max-columns: 3; --gap: 16px; display: grid; gap: var(--gap); margin-inline: auto; /* this will create as many columns as necessary to keep the photo at least 300px, and up to all of the remaining grid container space */ grid-template-columns: repeat(auto-fit, minmax(var(--min-photo-width), 1fr)); /* to limit it to 3 columns, want to cap the container size as 1px less than what would allow 4 columns */ max-width: calc(var(--min-photo-width) * (1 + var(--max-columns)) + var(--gap) * var(--max-columns) - 1px); } .image-placeholder { background-color: lightgray; aspect-ratio: 1; border-radius: 16px; display: grid; place-content: center; font-size: 3rem; } </style> <body> <!-- Header --> <div class="header"> <h1>Camera Snapshot Grid</h1> </div> <!-- Photo Grid --> <div class="container"> <div class="image-placeholder">1</div> <div class="image-placeholder">2</div> <div class="image-placeholder">3</div> <div class="image-placeholder">4</div> <div class="image-placeholder">5</div> <div class="image-placeholder">6</div> <div class="image-placeholder">7</div> <div class="image-placeholder">8</div> <div class="image-placeholder">9</div> </div> </body> </html>
  quote
turtle
Lord of the Rant.
Formerly turtle2472
 
Join Date: Mar 2005
Location: Upstate South Carolina
 
2022-09-13, 08:24

Nifty! Thank you very much for this!
  quote
Posting Rules Navigation
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Post Reply

Forum Jump
Thread Tools
Similar Threads
Thread Thread Starter Forum Replies Last Post
Considering coming off the grid. turtle General Discussion 11 2011-08-16 10:04
Simple css layout dmegatool Programmer's Nook 5 2008-12-02 22:03
Layout Program pilot1129 Genius Bar 3 2006-11-15 15:55
Grid computing Oskar Third-Party Products 17 2006-02-11 22:29
Blazer Layout? Dave Feedback 8 2006-01-11 13:40


« Previous Thread | Next Thread »

All times are GMT -5. The time now is 08:06.


Powered by vBulletin®
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright ©2004 - 2024, AppleNova