img div not fitting a css grid cell

Question

I'm trying to sort out a css grid to fit my imgs on this tribute page project from free code camp. I managed to do the grid as I wanted to but I can't seem to fit the images perfectly in each cell. Some of them are not filling the entire cell and others are exceeding it. This is the code:

.img-div-container {
  display: grid;
  grid-template-columns: 50% 25% 25%;
  grid template-rows: 5px 5px;
  margin-left: 100px;
  margin-right: 100px;
  grid-column-gap: 5px;
  align-content: stretch;
  justify-content: stretch;
  background: hsla(199, 19%, 62%, 0.21);
  border: 2px outset hsla(199, 19%, 62%, 0.21)
}

.image-bigger {
  grid-column: 1/2;
  grid-row: 1/3;
  place-self: stretch;
  ;
}

.image-wider {
  grid-column: 2/4;
  grid-row: 2/3;
  place-self: end stretch;
  width: 95%;
}

.image-normal,
.image-bigger,
{
  place-self: stretch;
  justify-self: flex-start;
}

img {
  width: 100%;
  height: 87%;
}

.normal {
  width: 100%;
  height: auto;
}

<div class="img-div-container">
  <div class="image-bigger"><img src="http://s2.glbimg.com/eP3_5jDhj_6tF-nyyiGpPOKdHNh8tT68kXTqIHZg3lBrXaqmUDsPSdlfxwreNWMq/e.glbimg.com/og/ed/f/original/2012/10/29/754_carlos_marighella.jpg"></div>

  <div class="image-normal"><img class="resize" src="https://drupal-multisite-s3.s3-us-west-2.amazonaws.com/files/marighella2.jpg"></div>
  <div class="image-normal"><img class="normal" src="http://www.cartografiasdaditadura.org.br/files/2014/12/Carlos_Marighella.jpg"></div>
  <div class="image-wider"><img class="normal" id="bigode" src="http://memoriasdaditadura.org.br/wp-content/uploads/2014/11/mariguella4-e1471390559677-600x286.jpg"></div>

</div>

I'm sorry the code got a little bit messy when trying to fix this.

Answer 1

you are using

  display: grid;
  grid-template-columns: 50% 25% 25%;
  grid template-rows: 5px 5px;

which seems coherent 3 colums and 2 rows.

I would use

  display:grid;
  grid-template-columns: 50% 25% 25%;
  grid-template-rows:1fr 1fr;

to avoid a fixed value and let the browser manage sizing for the rows.

Then , you use

.image-wider {
  grid-column: 2/4;
  grid-row: 2/3;
}

Which would work perfectly with a grid-template-areas if areas described 4 columns and 3 rows, which is obviously not the case here (you setted 3 columns and 2 rows ) .

I would safely use here for a grid-template-columns / grid-template-rows :

.image-wider {
  grid-column: 2 / span 2; /* set in the second column and span through 2 columns */
  grid-row: 2;/* not really needed here since it is already standing in the last empty grid cell avalaible */
}

tell only how many cell there is to span through instead telling go from cell 2 to cell 4 (grid-template-areas was not set ! )

---

When using flex or grid, if you are unfamiliar with it, make it into steps as simple as possible .

You could have start to build your grid layout with a few extra class to make it easier to read at first and easier to tune later.

the row-gap also seems to me more alike a margin-bottom for the first 2 small grid.

---

code example broken into pieces to show where to dispatch each containers ;)

.grid {
  display:grid;
  margin:0 100px;
  grid-template-columns: 50% 25% 25%;
  grid-template-rows:1fr 1fr;
}

.c1 {
  grid-column:1;
}
.c2 {
  grid-column:2;a
}
.c3 {
  grid-column:3;
}

.c23 {
  grid-column:2/ span 3;
}
.r1 {
  grid-row:1;
}
.r2 {
  grid-row:2;
}
.r12 {
  grid-row:1/ span2;
}
.image-normal {
  margin-bottom:5px;
}
/* whatever size is needed , object-fit can also be used to clip and avoid pixel stretching */
img {
  height:100%;
  width:100%;
}

<div class="img-div-container grid">
  <div class="image-bigger c1 r12">
    <img src="http://s2.glbimg.com/eP3_5jDhj_6tF-nyyiGpPOKdHNh8tT68kXTqIHZg3lBrXaqmUDsPSdlfxwreNWMq/e.glbimg.com/og/ed/f/original/2012/10/29/754_carlos_marighella.jpg">
    
  </div>
  <div class="image-normal c2 r1">
    <img class="resize" src="https://drupal-multisite-s3.s3-us-west-2.amazonaws.com/files/marighella2.jpg">
    
  </div>
  <div class="image-normal c3 r1">
    <img class="normal" src="http://www.cartografiasdaditadura.org.br/files/2014/12/Carlos_Marighella.jpg">
    
  </div>
  <div class="image-wider c23 r2">
    <img class="normal" id="bigode" src="http://memoriasdaditadura.org.br/wp-content/uploads/2014/11/mariguella4-e1471390559677-600x286.jpg">
    
  </div>
</div>

Looks like you mixed grid-template-areas and grid-template-rows (-columns) to fill your grid .

Answer 2

The biggest change I did is to add the property object-fit to your images:

img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

https://www.w3schools.com/css/css3_object-fit.asp

For the rest, I have only commented on some of your rules that I considered unnecessary to this work:

.img-div-container {
  display: grid;
  grid-template-columns: 50% 25% 25%;
  /*grid-template-rows: 5px 5px;*/
  margin-left: 100px;
  margin-right: 100px;
  grid-gap: 5px;
  /*align-content: stretch;
  justify-content: stretch;*/
  background: hsla(199, 19%, 62%, 0.21);
  border: 2px outset hsla(199, 19%, 62%, 0.21);
  overflow:hidden;
}

.image-bigger {
  grid-column: 1/2;
  grid-row: 1/3;
  /*place-self: stretch;*/
}

.image-wider {
  grid-column: 2/4;
  grid-row: 2/3;
  /*place-self: end stretch;
  width: 95%;*/
}

/*.image-normal,
.image-bigger,
{
  place-self: stretch;
  justify-self: flex-start;
}*/

img {
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
}

/*.normal {
  width: 100%;
  height: auto;
}*/

<div class="img-div-container">
  <div class="image-bigger"><img src="http://s2.glbimg.com/eP3_5jDhj_6tF-nyyiGpPOKdHNh8tT68kXTqIHZg3lBrXaqmUDsPSdlfxwreNWMq/e.glbimg.com/og/ed/f/original/2012/10/29/754_carlos_marighella.jpg"></div>

  <div class="image-normal"><img class="resize" src="https://drupal-multisite-s3.s3-us-west-2.amazonaws.com/files/marighella2.jpg"></div>
  <div class="image-normal"><img class="normal" src="http://www.cartografiasdaditadura.org.br/files/2014/12/Carlos_Marighella.jpg"></div>
  <div class="image-wider"><img class="normal" id="bigode" src="http://memoriasdaditadura.org.br/wp-content/uploads/2014/11/mariguella4-e1471390559677-600x286.jpg"></div>

</div>

Answer 3

Try to give your grid grid-template-areas

and then grid-area to each div accordingly,

for example:

HTML

<div class="grid-container">
  <div class="verticalphoto"></div>
  <div class="photo1"></div>
  <div class="photo2"></div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: 
"verticalphoto photo1 . ." "verticalphoto photo2 . ." ". . . .";
}

.verticalphoto { grid-area: verticalphoto; }

.photo1 { grid-area: photo1; }

.photo2 { grid-area: photo2; }

to fit the image, try,

img {

 width: 100%;
 height: 100%;
 display: block;
 object-fit: cover;

}