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/

[github-actions]

🤖 Approved and ready for processing.

Follow ALL instructions in .github/instructions/wants-processing.instructions.md section "Step 5: Want File Creation" - this is your ONLY source of truth.

Key steps:

1. Run npm run create-want to generate UUID and markdown template
2. Fill in the markdown file with data from this issue (ensure the discussion URL ends with this issue number)
3. Add any related links and update the original issue body to match the cleaned want content (no frontmatter)
4. Run npm run validate-want wants/<UUID>.md to validate
5. Create branch and PR with markdown file
6. Reference this issue number in the PR description

Do not look at any other documentation files for processing guidance.