6

I have a CSS grid, sometimes not all the elements are used. In the actual use case I am using the grid for input widgets, where there maybe extra help text or errors dropped into a specific grid-area. The problem I have is with grid-gap, if the row is empty, it still applies the gap. This results in a double row gap at bottom. Is there a way to disable showing gaps between empty rows?

I face this problem all the time, it makes grid gap unusable to me, so generally I don't use grid-gap, and use more complicated margin setups.

.parent {
  background: gray;
  padding: 16px;
  margin: 16px;
  display: grid;
  grid-template-columns: 64px 128px;
  grid-template-areas:
"childa childb"
"childc childd"
"childe childf";
  grid-gap: 16px;
}

[class^="child"] {
  background-color: red;   
}

.childa { grid-area: childa }
.childb { grid-area: childb }
.childc { grid-area: childc }
.childd { grid-area: childd }
.childe { grid-area: childe }
.childf { grid-area: childf }
<p>Grid gap is okay if all cells filled:</p>
<div class="parent">
  <span class="childa">cell A</span>
  <span class="childc">cell C</span>
  <span class="childb">cell B</span>
  <span class="childe">cell E</span>
  <span class="childf">cell F</span>
  <span class="childd">cell D</span>
</div>
<p>Note the double gap at the bottom due to the empty row:</p>
<div class="parent">
  <span class="childa">cell A</span>
  <span class="childb">cell B</span>
  <span class="childd">cell D</span>
</div>

Improve this question
10
  • "Is there a way to semantically disable showing gaps between empty rows?"- - No, there is not
    – Paulie_D
    Commented Jan 19, 2022 at 19:36
  • @Paulie_D, okay dropped the word "semantically". was just trying to convey, 'none hacky'
    – run_the_race
    Commented Jan 19, 2022 at 19:38
  • 1
    why are you adding areas since you have the default flow? only specify 2 columns and it's done, the browser will do the job for you
    – Temani Afif
    Commented Jan 19, 2022 at 19:38
  • The problem is that having defined a grid area/row it's gonna have a gap applied. If you can dispense with those and just use the natural flow the problem goes away - codepen.io/Paulie-D/pen/poWmdvO
    – Paulie_D
    Commented Jan 19, 2022 at 19:40
  • 2
    you still can do without areas. Share with us a real use case if you want to get accurate answers. Sharing a random example far from your real use case will not help you. I see nothing from your comment in your question
    – Temani Afif
    Commented Jan 19, 2022 at 19:43

1 Answer 1

Reset to default
8

Don't define areas, define positions:

.parent {
   background: gray;
   padding: 16px;
   margin: 16px;
   display: grid;
   grid-gap: 16px;
}
[class^="child"] {
   background-color: red;   
}
.childa { grid-area: 1/1 } /* row / column */
.childb { grid-area: 1/2 }
.childc { grid-area: 2/1 }
.childd { grid-area: 2/2 }
.childe { grid-area: 3/1 }
.childf { grid-area: 3/2 }
.childg { grid-area: 4/1 }
<div class="parent">
<span class="childa">cell A</span>
<span class="childc">cell C</span>
<span class="childb">cell B</span>
<span class="childe">cell E</span>
<span class="childf">cell F</span>
<span class="childd">cell D</span>
</div>

<div class="parent">
<span class="childa">cell A</span>
<span class="childb">cell B</span>
<span class="childd">cell D</span>
</div>

Also like below:

.parent {
   background: gray;
   padding: 16px;
   margin: 16px;
   display: grid;
   grid-auto-flow:dense; /* don't forget this */
   grid-gap: 16px;
}
[class^="child"] {
   background-color: red;   
}
.childa,
.childc,
.childe { grid-column: 1 } 

.childb,
.childd,
.childf { grid-column: 2 }
<div class="parent">
<span class="childa">cell A</span>
<span class="childc">cell C</span>
<span class="childb">cell B</span>
<span class="childe">cell E</span>
<span class="childf">cell F</span>
<span class="childd">cell D</span>
</div>

<div class="parent">
<span class="childa">cell A</span>
<span class="childb">cell B</span>
<span class="childd">cell D</span>
</div>

<div class="parent">
<span class="childa">cell A</span>
<span class="childb">cell B</span>
<span class="childf">cell F</span>
</div>

Improve this answer
4
  • Impressive answer, applying it, but have not come right yet, but your code pen works well!
    – run_the_race
    Commented Jan 19, 2022 at 20:03
  • I am surprised this works so well because I thought areas was basically an alias for rows/columns, but there seems to be other subtle changes. Thank you this is really good! Well done! I was doubtful there was a solution when I posted it.
    – run_the_race
    Commented Jan 19, 2022 at 20:08
  • Just a sidenote on grid-gap: grid-gap is afaik deprecated/obsolete and an alias for gap. same for grid-row-gap which is row-gap and grid-column-gap which is column-gap. See here
    – aProgger
    Commented Nov 24, 2022 at 14:19
  • 4
    It's not always possible to avoid using areas. Any ideas how to make it work with areas?
    – ogggre
    Commented Jun 12, 2023 at 18:12

Not the answer you're looking for? Browse other questions tagged or ask your own question.