Lord of the Rant.
Formerly turtle2472 Join Date: Mar 2005
Location: Upstate South Carolina
|
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 |
‽
|
Heh heh, abreast.
|
quote |
Lord of the Rant.
Formerly turtle2472 Join Date: Mar 2005
Location: Upstate South Carolina
|
As a military guy it is a normal word. Reading you write it makes me see the humor in it. |
quote |
‽
|
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 |
‽
|
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"> </div>
<div style="width:100%; background:blue"> </div>
<div style="width:100%; background:green"> </div>
<div style="width:100%; background:red"> </div>
<div style="width:100%; background:blue"> </div>
<div style="width:100%; background:green"> </div>
<div style="width:100%; background:red"> </div>
<div style="width:100%; background:blue"> </div>
<div style="width:100%; background:green"> </div>
</div>
</body>
</html> This will show a grid with four columns if wide enough, otherwise two, otherwise one. |
quote |
Lord of the Rant.
Formerly turtle2472 Join Date: Mar 2005
Location: Upstate South Carolina
|
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 |
‽
|
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"> </div>
<div style="width:100%; background:blue"> </div>
<div style="width:100%; background:green"> </div>
<div style="width:100%; background:yellow"> </div>
<div style="width:100%; background:red"> </div>
<div style="width:100%; background:blue"> </div>
<div style="width:100%; background:green"> </div>
<div style="width:100%; background:yellow"> </div>
<div style="width:100%; background:red"> </div>
</div>
</body>
</html> |
quote |
Lord of the Rant.
Formerly turtle2472 Join Date: Mar 2005
Location: Upstate South Carolina
|
Like this:
Of course, if I add more then it would just continue the pattern. |
quote |
Lord of the Rant.
Formerly turtle2472 Join Date: Mar 2005
Location: Upstate South Carolina
|
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 |
‽
|
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 |
Lord of the Rant.
Formerly turtle2472 Join Date: Mar 2005
Location: Upstate South Carolina
|
Yes! That is what I'm after! Thank you very much.
|
quote |
Senior Member
Join Date: May 2004
Location: Chicago
|
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 |
Lord of the Rant.
Formerly turtle2472 Join Date: Mar 2005
Location: Upstate South Carolina
|
Nifty! Thank you very much for this!
|
quote |
Posting Rules | Navigation |
|
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 |