search

WebWeWant / webwewant.fyi

If you build websites, you inevitably run into problems. Maybe there’s no way to achieve an aspect of your design using CSS. Or maybe there’s a device feature you really wish you could tap into using JavaScript. Or perhaps the in-browser DevTools don’t give you a key insight you need to do your job. We want to hear about it!
https://webwewant.fyi
MIT License
74 stars 23 forks source link

An option to let grid gaps collapse #623

Open WebWeWantBot opened 1 year ago

WebWeWantBot commented 1 year ago

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:

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/