Re: [csswg-drafts] [css-grid] grid-gap is still taking up space when an element defined in grid-template-area is not on the page. (#5813)

Sorry if I missed it elsewhere in the conversation, but how is “empty” defined? I assume it’s more like how `empty-cells` does it (no visible content) and not how `:empty` does it (no child nodes)?

I’m thinking about a case like in a component. Say I have a template like this.

```html
<template shadowrootmode="open">
 <div class="wrapper">
  <div class="icon slot-wrapper">
   <slot name="icon"></slot>
  </div>
  <div class="secondary-text slot-wrapper">
   <slot name="secondary-text"></slot>
  </div>
  <div class="primary slot-wrapper">
   <slot></slot>
  </div>
 </div>
</template>
```

There are wrappers around the slots because I need to style something about them. For example,

```css
.icon {
 background-color: goldenrod;
 aspect-ratio: 1;
 border-radius: 50%;
}

/* this could be applied directly to the slot because they’re inherited, but the above .icon example can’t be */
.secondary-text {
 font-size: .7rem;
 color: GrayText;
}
```

Then I lay it out like this:

```css
.wrapper {
 display: grid;
 grid-template-columns: auto 1fr;
 grid-template-rows: repeat(2, auto);
 grid-template-areas:
  "icon primary"
  "icon secondary";
 gap: 8px;
 empty-tracks: hide;
 
 .icon {
  grid-area: icon;
 }
 
 .secondary-text {
  grid-area: secondary;
 }
 
 .primary {
  grid-area: primary;
 }
}
```

In a hypothetical future where we get both `empty-tracks` and [`:has-slotted`](https://github.com/w3c/csswg-drafts/issues/6867), if I were to do something like this,

```css
.slot-wrapper:has(slot:not(:has-slotted)) {
 display: none;
 /* or would it be visibility: hidden ? */
}
```

am I correct in thinking that when nothing is slotted into the `icon` slot, there will *not* be 8px of space between the empty first column and occupied second column?

Just wanting to check whether this use case is covered by this (burgeoning) proposal. Thanks!

-- 
GitHub Notification of comment by Noleli
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5813#issuecomment-2759160306 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 27 March 2025 19:17:57 UTC