How to set equal margin to rows and columns in CSS grid?

Question

I have such container

    #container{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    }

of such items

    .picture_tile{
        width:200px;
        height: 200px;
        position: relative;
        background: white;
        color: black;
        margin: auto;
    }

it adjusts nicely horizontally. It nicely adjusts while scaling my monitor, is it possible to apply space between the images to rows as well? I am total beginner to CSS. Is it possible to apply the same space that is changing between the items on vertical gap? When I scale my monitor and the items' horizontal gap is anything between 10-50px. Can the same change apply on vertical gap while changing horizontal size of my window? I hope it's understandable. I only want to have perfect grid with perfect gaps, everything same, but the content would be dynamic and behave like when display: grid is applied

Answer 1

You can use grid-gap: value property on your #container