|
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 notion of participants, not simply observers. One who does not vote has no right to complain.” MineCraft? mc.applenova.com | Visit us! | Maybe someday I'll proof read, until then deal with it. |
| quote |
|
‽
Join Date: May 2004
Location: near Bremen, Germany
     |
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 |
|
‽
Join Date: May 2004
Location: near Bremen, Germany
|
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 |
|
‽
Join Date: May 2004
Location: near Bremen, Germany
|
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 notion of participants, not simply observers. One who does not vote has no right to complain.” MineCraft? mc.applenova.com | Visit us! | Maybe someday I'll proof read, until then deal with it. |
| quote |
|
‽
Join Date: May 2004
Location: near Bremen, Germany
|
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 |
|
‽
Join Date: May 2004
Location: near Bremen, Germany
|
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 |
| 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 |
«
Previous Thread
|
Next Thread
»
All times are GMT -5. The time now is 13:35.