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

RadekF · Accepted Answer · 2019-04-19 14:29:44Z

1

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

answered Apr 19, 2019 at 14:29

RadekF

4965 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jansindl3r Over a year ago

well, and how you set it dynamically so it copies horizontal spaces between the items?

kukkuz Over a year ago

@Jansindl3r suppose you set grid-gap:20px, it sets equal 20px grid-row-gap and grid-column-gap; you can set them separately too....

Jansindl3r Over a year ago

It has been a long search but I managed to do it. jansindl3r.github.io/renata (after 10secs of being on that page) hmm I don't even remember how I did it. But padding-top 100% keeps the div squarish. I will post a proper answer in case some other people want to do the same

Jansindl3r Over a year ago

Now the gaps are fixed, but I tried different approach where the squares stayed the same width and height and the gaps would change.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related