Space between first and second line between grid gallery

Question

.gallery{
display: grid;
grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
grid-template-rows: repeat( auto-fit, minmax(250px, 1fr) );

} grid image

can you tell me what the heck is spacing between first and second line? other line works perfect. I have also declared *{ margin: 0; padding: 0;} please help.

Answer 1

Your css is creating grid items of 250 long each,and the constant is not that much in height in that div, so its taking the full height I.E 250px, Check this https://gridbyexample.com/examples/example28/

So just make rows auto as per the content in it

.gallery{
display: grid;
grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
grid-template-rows: auto;
}

<div class="gallery">
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
<div style="border: 1px solid red; height: 100px;"></div>
</div>