How do I remove this white space while using CSS grid layout? - css

Question

I am just learning how to use CSS grid layout from a crash course. While tinkering around with the grid-template-columns property, a white space has appeared under one of my cat images that I cannot get rid of.
This is my HTML:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.gallery {
display: grid;
grid-template-columns: 200px 200px 1fr;
}
.gallery img {
width: 100%;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<main>
<div class="gallery">
<img src="https://placeimg.com/640/480/animals" alt='' />
<img src="https://placeimg.com/640/480/arch" alt='' />
<img src="https://placeimg.com/640/480/nature" alt='' />
<img src="https://placeimg.com/640/480/people" alt='' />
<img src="https://placeimg.com/640/480/tech" alt='' />
</div>
</main>
Can someone help me resolve this?

Answer 1

Make the third image into 3 rows:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.gallery {
display: grid;
grid-template-columns: 200px 200px 1fr;
}
.gallery img {
width: 100%;
}
.gallery img:nth-child(3) {
grid-row: span 3;
}
<div class="gallery">
<img src="https://placeimg.com/640/480/animals" >
<img src="https://placeimg.com/640/480/arch" >
<img src="https://placeimg.com/640/480/nature" >
<img src="https://placeimg.com/640/480/people" >
<img src="https://placeimg.com/640/480/tech" >
</div>

Answer 2

This depends on what you want to have happen instead.
grid-template-columns specifies your grid columns. By setting it to: 200px 200px 1fr you're basically instructing the browser:
There should be 3 columns for my content.
Set the first and second columns to 200px wide
Use flex for the third column.
So instead, one option would be to make use of a repeat function. The following will make 3 equal columns:
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
img {
width: 100%;
}
Also, FWIW keep an eye on both your HTML and CSS. In the HTML, you should have closing tag for <main></main>. And if you're working with vanilla CSS (not Sass or Less), your declarations for img should be outside those for .gallery.