An option to let grid gaps collapse

[WebWeWantBot]

---

title: An option to let grid gaps collapse
date: 2023-05-12T22:11:11.391Z
submitter: Nick Gard
number: 645eb97fcf78a200aeb6376e
tags: [ ]
discussion: https://github.com/WebWeWant/webwewant.fyi/discussions/
status: [ discussing || in-progress || complete ]
related:

• title:
  url:
  type: [ article || explainer || draft || spec || note || discussion ]

---

When using grid display for laying out unknown content, I would like gaps to be added to only rows or columns that contain something.

An example where markup differs from what the CSS is expecting

<div class="banner">
  <div class="icon">
    <!-- svg stuff here -->
  </div>
  <div class="content">
    blah blah blah
  </div>
  <!-- an action button would go here -->
  <button class="close">X</button>
</div>

<style>
  .banner {
    display: grid;
    grid-template-areas:
      "icon content action close";
    grid-template-rows:
      min-content 1fr repeat(2, min-content);
    gap: 0.5em;
  }

  .icon { grid-area: icon; }
  .content { grid-area: content; }
  .action { grid-area: action; }
  .close { grid-area: close; }
</style>

There is a 1em gap between the content and the close button because no action button exists but the CSS still adds gap space around where it would be.

A property like gap-collapse with possible values of "both," "none," "column," or "row" would help eliminate this extra reserved space when the template area is empty.

---

If posted, this will appear at https://webwewant.fyi/wants/645eb97fcf78a200aeb6376e/