CSS Grid gap not the same size for column and row

Question

I have the following elements:

<body>
    <div class="parent">
        <div class="grid">
            <!--...-->
        </div>
    </div>
</body>

.parent {
    margin: 30px 30px 0 30px;
    display: block;
}

.grid {
    display: grid;
    grid-template-rows: 55% 45%;
    grid-template-columns: 20% 48% 30%;
    gap: 1%;
}

As you can see, the size of the cells are based on the parent element size (percentual size), and so are the gap size.

The problem is that while the column gap size is just the way I want, the row gap is very thin. I understand that this is caused because the gap is equal to 1% of the heigth of the parent element, but i wanted it to be the same size as the column gap.

Is there a way to make the row gap the same size as the column gap?

while it is an interesting approach, does `vw` works based on the parent's element size or the total screensize? from w3 schools: ["vw: Relative to 1% of the width of the viewport"](https://www.w3schools.com/css/css_units.asp) — Lucca Bibar, May 20 '20 at 21:35
if your grid is full screen then you will have almiost the same result. If not share your full code — Temani Afif, May 20 '20 at 21:36

score 1 · Answer 1 · answered May 20 '20 at 21:33

1

Try using the rem unit. For example, gap: 2rem; This will make both row and column size equal to the root element's font size.

answered May 20 '20 at 21:33

Ade_LaNa

21
1
3

score 1 · Answer 2 · answered May 20 '20 at 21:47

First, it's better to use fr instead of percentage then you can rely on vw unit like below:

.parent {
  margin: 30px 30px 0 30px;
  display: block;
}

.grid {
  display: grid;
  border: 1px solid;
  grid-template-rows: 55fr 45fr;
  grid-template-columns: 20fr 48fr 30fr;
  grid-gap: calc((100vw - 60px)/100);
}

.grid>div {
  min-height: 100px;
  height:100%;
  background: red;
}

<div class="parent">
  <div class="grid">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  below to compare
  <div class="grid" style="grid-gap:1%;">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CSS Grid gap not the same size for column and row

2 Answers2