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
– Kiran Mistry, Commented Jul 1, 2019 at 6:15

Kiran Mistry · Accepted Answer · 2019-07-01 07:45:14Z

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 1, 2019 at 7:45

Kiran Mistry

2,7253 gold badges14 silver badges29 bronze badges

answered Jul 1, 2019 at 4:58

Mak0619

6606 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

piet.t · Accepted Answer · 2019-07-01 06:17:27Z

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

Kiran Mistry · Accepted Answer · 2019-07-01 07:46:14Z

0

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

edited Jul 1, 2019 at 7:46

Kiran Mistry

2,7253 gold badges14 silver badges29 bronze badges

answered Jul 1, 2019 at 4:56

Vintage Coders

1521 silver badge4 bronze badges

1 Comment

user11721944 Over a year ago

does not create squares please remove answer,also trying to refrain from pixel size specifications. thanks

Collectives™ on Stack Overflow

HTML CSS Image Gallery Not Making Squares with Auto or Stretch

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related