img div not fitting a css grid cell - html

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

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 2

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;
}

Answer 3

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 .