HTML CSS Image Gallery Not Making Squares with Auto or Stretch

Question

I want to create a 2 column, 3 row image square image gallery. For some reason when writing code, the height of the boxes are Not filling up grid. How do I make the height of images become square with width? Code , CSS and HTML below. Images should be touching edge to edge and would like to refrain from naming Pixel size if possible. Isn't there a stretch property or something? Trying to get that to work,

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0;
  padding: 0px;
}

img {
  width: 100%;
  height: auto;
  padding: 0px;
}

<div class="grid-container">
  <img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&amp;preset=gallery-tab-main-image">
  <img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7">
  <img src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png">
  <img src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpg">
  <img src="https://atlantis.nyc3.digitaloceanspaces.com/styled/1bec9ec74aac91e70b3ef91fee1fc0f9">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3DXqVk9AhGSx2PIYoUepA1UfZFnGt_kY6iJTq3hb10ZLGhFwPQg">
</div>

check below code and if your requirement is fullfill then vote up — Kiran Mistry, Jul 01 '19 at 06:15

score 1 · Accepted Answer · edited Jul 01 '19 at 07:45

1

If you want to fill up the box height. You should use align-items "stretch" property to the grid container.

.grid-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);.
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 0;
        padding: 0px;
        align-items: stretch;
    }

Demo Code

edited Jul 01 '19 at 07:45

Kiran Mistry

2,614
3
12
28

answered Jul 01 '19 at 04:58

Mak0619

652
6
20

score 0 · Answer 2 · edited Jul 01 '19 at 07:46

Try Following code.

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
 
img {
    width: 100%;
    height: 140px;
}

<div class="grid-container">
   <img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&amp;preset=gallery-tab-main-image">
   <img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7">
   <img src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png">
   <img src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpg">
   <img src="https://atlantis.nyc3.digitaloceanspaces.com/styled/1bec9ec74aac91e70b3ef91fee1fc0f9">
   <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3DXqVk9AhGSx2PIYoUepA1UfZFnGt_kY6iJTq3hb10ZLGhFwPQg">
</div>

Also make sure to use same size images in case you want to use height:auto

does not create squares please remove answer,also trying to refrain from pixel size specifications. thanks — , Jul 01 '19 at 05:06

score 0 · Answer 3 · edited Jul 01 '19 at 06:17

This is your solution and when you resize your window then images will automatically resize.

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0;
    padding: 0px;
    align-items: stretch; /* Default. Items are stretched to fit the container */
}

img {
   width: 100%;
   height:auto;
   padding: 0px;
}

<div class="grid-container">
   <img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&amp;preset=gallery-tab-main-image">
   <img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7">
   <img src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png">
   <img src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpg">
   <img src="https://atlantis.nyc3.digitaloceanspaces.com/styled/1bec9ec74aac91e70b3ef91fee1fc0f9">
   <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3DXqVk9AhGSx2PIYoUepA1UfZFnGt_kY6iJTq3hb10ZLGhFwPQg">
</div>

This is your source link your source code

HTML CSS Image Gallery Not Making Squares with Auto or Stretch

3 Answers3