CSS Grid after applying the row gutter(row-gap) grid container height is less than grid itself

Asked Sep 07 '21 at 17:54

Active Sep 08 '21 at 02:04

Viewed 34 times

I have made a simple Grid container:

.grid-container {
    border: 2px solid red;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 6%;
 }
 
 .grid-item {
   background: #4F5C40;
   border: 1px solid black;
   height: 150px;
   width: 150px;
 }
 
 .grid-neighbour {
   background: #404F5C;
   height: 150px;
   width: 100%;
 }

<div class="grid-container">
   <div class="grid-item"></div>
   <div class="grid-item"></div>
   <div class="grid-item"></div>
   <div class="grid-item"></div>
   <div class="grid-item"></div>
   <div class="grid-item"></div>
   <div class="grid-item"></div>
   <div class="grid-item"></div>
   <div class="grid-item"></div>
</div>
<div class="grid-neighbour"></div>

The problem is after I apply row-gap: 6%, my .grid-container height becomes less than the grid itself. Due to this, the next element .grid-neightbour occupies some of the space of the last row of the grid resulting in hiding some of the content.

What am I doing wrong?

edited Sep 08 '21 at 02:04

BSMP

4,596
8
33
44

asked Sep 07 '21 at 17:54

Mohsin Sethi

3

can you provide more code like the whole css and html? – Dev Sep 07 '21 at 17:58
1

please add enough code so it reproduce your issue, empty div have an height of 0 .... only the gaps could grow the grid as the code you share shows – G-Cyrillus Sep 07 '21 at 19:04
Thank you @BSMP for editing the question and completing the missing part. – Mohsin Sethi Sep 08 '21 at 08:32
Yes, it answers @benvc. Thank you. – Mohsin Sethi Sep 11 '21 at 09:41

CSS Grid after applying the row gutter(row-gap) grid container height is less than grid itself

0 Answers0