Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

An option to let grid gaps collapse #623

Open
WebWeWantBot opened this issue May 12, 2023 · 0 comments
Open

An option to let grid gaps collapse #623

WebWeWantBot opened this issue May 12, 2023 · 0 comments

Comments

@WebWeWantBot
Copy link


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/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant