HTML & CSS CSS image grid gallery

[Slovenc]

Hy i am really new to HTML and CSS and i am making CSS grid gallery. I have a problem...dont know how to get rid of white spaces between images in grid. Can someone please help me?

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link href=".\style.css" rel="stylesheet" type="text/css">
</head>

<body>

    <h1> CSS Grid Gallery</h1>

    <div class="container">
        
        <img src="slike\jalovec.jpg" class="img_1" alt="Kočna"/>
        <img src="slike\kočna.jpg" class="img_2" alt="Kočna"/>
        <img src="slike\planjava.jpg" class="img_3" alt="Kočna"/>
        <img src="slike\prisojnik.jpg" class="img_4" alt="Kočna"/>
        <img src="slike\špik.jpg" class="img_5" alt="Kočna"/>
        <img src="slike\triglav.jpg" class="img_6" alt="Kočna"/>
        <img src="slike\mrzla gora.jpg" class="img_7" alt="Kočna"/>

    </div>

</body>

</html>

body{
    margin:20px;
}

.container{
    display:grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(auto-fill, 1fr);
    grid-gap:5px;
}

h1{
    text-align:center;
}

And screen print of grid web page:

 

[Slovenc]

Please for quick reply

 

[OldMan]

In CSS file .container get rid of grid-gap:5px; set it to zero. You could also use grid-row-gap and grid-column-gap if you want different gaps.

 

[Slovenc]

Yes, but...how to reduce white space in cells between pictures?

 

[OldMan]

I have a problem...dont know how to get rid of white spaces between images in grid.A

And I did. I can not see your images and that maybe where the problem lies, but grid-gap:0; instead of grid-gap:5px; will solve a lot of the problem. Did you try it? An page capture of the results, before and after might help>

 

[Slovenc]

I did set grid-gap:0px Here is print screen of no grid-gap: