Creating responsive 3 x 3 gallery box

@soupiiJun 02.2020

Hello I am trying to create a flex grid which has 3 by 3 image gallery which is responsive,

Currently this is going on a wordpress page and this is the code to my image using openseadragon.
So I need this image to appear three times next to each other and three on the bottom, I will update the images and add more image boxes once i get the correct layout.

Thank you.
<div id=”materials-0158″ class=”suarrmaterials-zoomable-image” style=”height:460px; width:310px;” data-image=”2020/05/DSC_0158-1.jpg”></div>

to post a comment

13 Comments(s) _↴

@VITSUSAJun 02.2020 — #What is the problem? or error which you are facing?

@soupiiauthorJun 02.2020 — #There isnt any errors just trying to create a flex grid

@soupiiauthorJun 03.2020 — #any ideas?

@SempervivumJun 03.2020 — #Check if this demo helps you:

&lt;!DOCTYPE html&gt;
 &lt;html&gt;
 
 &lt;head&gt;
 &lt;meta charset="utf-8"&gt;
 &lt;title&gt;Image Stack&lt;/title&gt;
 
 <i>    </i>&lt;style&gt;
 <i>    </i>    html,
 <i>    </i>    body {
 <i>    </i>        margin: 0;
 <i>    </i>        width: 100%;
 <i>    </i>        height: 100%;
 <i>    </i>    }
 
 <i>    </i>    .container {
 <i>    </i>        height: 100%;
 <i>    </i>        display: grid;
 <i>    </i>        grid-template-columns: 1fr 1fr 1fr;
 <i>    </i>        grid-template-rows: 1fr 1fr 1fr;
 <i>    </i>        justify-items: stretch;
 <i>    </i>    }
 
 <i>    </i>    .suarrmaterials-zoomable-image {
 <i>    </i>        border: 2px solid lightblue;
 <i>    </i>    }
 <i>    </i>&lt;/style&gt;
 &lt;/head&gt;
 
 &lt;body&gt;
 &lt;div class="container"&gt;
 &lt;div id="materials-0158" class="suarrmaterials-zoomable-image" data-image="2020/05/DSC_0158-1.jpg"&gt;&lt;/div&gt;
 &lt;div id="materials-0159" class="suarrmaterials-zoomable-image" data-image="2020/05/DSC_0158-1.jpg"&gt;&lt;/div&gt;
 &lt;div id="materials-0160" class="suarrmaterials-zoomable-image" data-image="2020/05/DSC_0158-1.jpg"&gt;&lt;/div&gt;
 &lt;div id="materials-0161" class="suarrmaterials-zoomable-image" data-image="2020/05/DSC_0158-1.jpg"&gt;&lt;/div&gt;
 &lt;div id="materials-0162" class="suarrmaterials-zoomable-image" data-image="2020/05/DSC_0158-1.jpg"&gt;&lt;/div&gt;
 &lt;div id="materials-0163" class="suarrmaterials-zoomable-image" data-image="2020/05/DSC_0158-1.jpg"&gt;&lt;/div&gt;
 &lt;div id="materials-0164" class="suarrmaterials-zoomable-image" data-image="2020/05/DSC_0158-1.jpg"&gt;&lt;/div&gt;
 &lt;div id="materials-0165" class="suarrmaterials-zoomable-image" data-image="2020/05/DSC_0158-1.jpg"&gt;&lt;/div&gt;
 &lt;div id="materials-0166" class="suarrmaterials-zoomable-image" data-image="2020/05/DSC_0158-1.jpg"&gt;&lt;/div&gt;
 &lt;/div&gt;
 &lt;/body&gt;
 
 &lt;/html&gt;

@soupiiauthorJun 04.2020 — #Thank you but I needed this to be a flex grid so when i minimize the window or maximize it it becomes a 2x2 or 1x1

Also when I added only three images it is outside the boxes, why is that?

This is the code i Have, I will add more images once I get it working

[code]  <!DOCTYPE html>
 <html>
 
 <head>
 <meta charset="utf-8">
 <title>Image Stack</title>
 
 <style>
 html,
 body {
 margin: 0;
 width: 100%;
 height: 100%;
 }
 
  .container {
   height: 100%;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-template-rows: 1fr 1fr 1fr;
   justify-items: stretch;
  }
 
  .suarrmaterials-zoomable-image {
   border: 2px solid lightblue;
  }
 </style>
 </head>
 
 <body>
 <div class="container">
 <div id="materials-01581" class="suarrmaterials-zoomable-image" style="height:400px; width:400px;" data-image="2013/02/DSC_0158-1-scaled.jpg"></div>
 <div id="materials-01581" class="suarrmaterials-zoomable-image" style="height:400px; width:400px;" data-image="2013/02/DSC_0158-1-scaled.jpg"></div>
 <div id="materials-01581" class="suarrmaterials-zoomable-image" style="height:400px; width:400px;" data-image="2013/02/DSC_0158-1-scaled.jpg"></div>
 </div>
 </body>
 
 </html>[code]
 
 
 
 [upl-image-preview url=https://www.webdeveloper.com/assets/files/2020-06-04/1591280642-859249-image.png]
 Should be more space in between boxes

@SempervivumJun 04.2020 — #Thank you but I needed this to be a flex grid so when i minimize the window or maximize it it becomes a 2x2 or 1x1[/quote]You should have mentioned this from the beginning.

When the grid is 2x2 or 1x1, what about the remaining images?

@soupiiauthorJun 04.2020 — #I thought I mentioned it in the first sentence, i applogize.

the smaller the window is itll go underneath each other

similar to how this is handling the images https://suarrmaterials-test.syr.edu/

The page that I am redoing is this https://suarrmaterials-test.syr.edu/mixed-glass-collection/

@SempervivumJun 04.2020 — #Recently I made a layout for another thread. Check if this is what you require.

&lt;!DOCTYPE html&gt;
 &lt;html&gt;
 
 &lt;head&gt;
 &lt;meta charset="utf-8"&gt;
 &lt;title&gt;Image Stack&lt;/title&gt;
 
 <i>    </i>&lt;style&gt;
 <i>    </i>    .container {
 <i>    </i>        display: grid;
 <i>    </i>        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 <i>    </i>    }
 
 <i>    </i>    .cell {
 <i>    </i>        border: 2px solid lightblue;
 <i>    </i>        height: 100px;
 <i>    </i>    }
 <i>    </i>&lt;/style&gt;
 &lt;/head&gt;
 
 &lt;body&gt;
 &lt;div class="container"&gt;
 &lt;div class="cell"&gt;&lt;/div&gt;
 &lt;div class="cell"&gt;&lt;/div&gt;
 &lt;div class="cell"&gt;&lt;/div&gt;
 &lt;div class="cell"&gt;&lt;/div&gt;
 &lt;div class="cell"&gt;&lt;/div&gt;
 &lt;div class="cell"&gt;&lt;/div&gt;
 &lt;div class="cell"&gt;&lt;/div&gt;
 &lt;div class="cell"&gt;&lt;/div&gt;
 &lt;div class="cell"&gt;&lt;/div&gt;
 &lt;div class="cell"&gt;&lt;/div&gt;
 &lt;/div&gt;
 &lt;/body&gt;
 
 &lt;/html&gt;

@soupiiauthorJun 04.2020 — #The thing is I have this code which makes the image appear ...

<div id="materials-01571" class="suarrmaterials-zoomable-image" style="height:400px; width:400px;" data-image="2013/02/DSC_0157-1-scaled.jpg"></div>

How do I incorporate this into the html code?

@bwclovisJun 05.2020 — #From looking at Sempervivum's code, you should be able to replace the "cell" divs with your div. That one uses grid, which is awesome but has issues in some browsers ( looking at you IE). But if you don't have to support, its the way to go.

@soupiiauthorJun 05.2020 — #I did replace the div blocks with mine but it didnt work, it showed up like that.

&lt;!DOCTYPE html&gt;
 &lt;html&gt;
 
 &lt;head&gt;
 &lt;meta charset="utf-8"&gt;
 &lt;title&gt;Image Stack&lt;/title&gt;
 
 &lt;style&gt;
 .container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 }
 
 <i>    </i>.cell {
 <i>    </i>    border: 2px solid lightblue;
 <i>    </i>    height: 100px;
 <i>    </i>}
 &lt;/style&gt;
 &lt;/head&gt;
 
 &lt;body&gt;
 &lt;div class="container"&gt;
 &lt;div id="materials-lago1" class="suarrmaterials-zoomable-image" style="height:400px; width:400px;" data-image="2013/01/lago1.jpg"&gt;&lt;/div&gt;
 &lt;div id="materials-lago2" class="suarrmaterials-zoomable-image" style="height:400px; width:400px;" data-image="2013/01/lago2.jpg"&gt;&lt;/div&gt;
 &lt;div id="materials-lago3" class="suarrmaterials-zoomable-image" style="height:400px; width:400px;" data-image="2013/01/lago3.jpg"&gt;&lt;/div&gt;
 
 <i>    </i>&lt;/div&gt;
 &lt;/body&gt;
 
 &lt;/html&gt;

[upl-image-preview url=https://www.webdeveloper.com/assets/files/2020-06-05/1591382536-243972-image.png]

@SempervivumJun 05.2020 — #You need to remove the definition of width and height, this:

` style="height:400px; width:400px;"`

Delete it.

@soupiiauthorJun 08.2020 — #Hi i removed that definition and the picture disappeared..

 &lt;!DOCTYPE html&gt;
 &lt;html&gt;
 
 &lt;head&gt;
 &lt;meta charset="utf-8"&gt;
 &lt;title&gt;Image Stack&lt;/title&gt;
 
 &lt;style&gt;
 .container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 }
 
 .cell {
 border: 2px solid lightblue;
 height: 100px;
 }
 &lt;/style&gt;
 &lt;/head&gt;
 
 &lt;body&gt;
 &lt;div class="container"&gt;
 &lt;div id="materials-lago1" class="suarrmaterials-zoomable-image" data-image="2013/01/lago1.jpg"&gt;&lt;/div&gt;
 &lt;div id="materials-lago2" class="suarrmaterials-zoomable-image"  data-image="2013/01/lago2.jpg"&gt;&lt;/div&gt;
 &lt;div id="materials-lago3" class="suarrmaterials-zoomable-image" data-image="2013/01/lago3.jpg"&gt;&lt;/div&gt;
 
 
 &lt;/div&gt;
 &lt;/body&gt;
 
 &lt;/html&gt;

please view https://suarrmaterials-test.syr.edu/metal/mesh/cambridge-collection/mandarin/

Success!

Help @soupii spread the word by sharing this article on Twitter...

Tweet This

Creating responsive 3 x 3 gallery box

13 Comments(s) _↴

Success!

Social

Version

Creating responsive 3 x 3 gallery box

13 Comments(s) ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴