[csswg-drafts] [css-grid] Property to visually collapse columns or rows along with gaps around them (#8867)

moniuch has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-grid] Property to visually collapse columns or rows along with gaps around them ==
### Request

I would like css grid to have a css property to support hiding columns or rows, with the following features (if possible):
- make the column/row invisible, obviously
- collapse the relevant gap (what `relevant` means is difficult to determine for me, but I believe some appropriate syntax - using words like `before, `after`, `both` - would make it explicit)
- children placed in the hidden cells should still be in the DOM so that methods like `.scrollIntoView()` would still work.
- make the new property animatable (nice-to-have)

Let me describe a use case that led me into thinking css specs might need it.

### Motivation

I had a vanilla JavaScript application which consisted of a dynamically populated array of editor rows (each consisting of `<textarea>` and `<label>`). The generated markup looked more or less as follows:

```html
<section id="jump-menu">
  <a href="#" data-jump-to="en"></a>
  <a href="#" data-jump-to="de"></a>
  <a href="#" data-jump-to="fr"></a>
</section>

<section id="editors">
  <label></label>
  <textarea lang="en"></textarea>
  <label></label>
  <textarea lang="de"></textarea>
  <label></label>
  <textarea lang="fr"></textarea>
  <!-- many more -->
</section>
```

`section#editors` was styled using css grid with two columns:

```css
section {
  display: grid;
  grid-template-columns: min-content 1fr;
}
```

and the jumper links would nicely locate the corresponding editors by finding `<textarea>` with a specific language attribute:

```js
target = document.querySelector(`textarea[lang="${lang}"]`)
target.scrollIntoView({ behavior: 'smooth' })

```

Then I started to componentize this application using WebComponents, which led to some structural complications. First off, the markup of the `section#editors` part changed to:

```html
<section id="editors">
  <my-wc-editor  lang="en">
    <label></label>
    <textarea lang="en"></textarea>
  </my-wc-editor>
  <my-wc-editor  lang="de">
    <label></label>
    <textarea lang="de"></textarea>
  </my-wc-editor>
  <my-wc-editor lang="fr">
    <label></label>
    <textarea lang="fr"></textarea>
  </my-wc-editor>
  <!-- many more -->
</section>
```

So, in order to retain the styling, I had to set:

```css
my-wc-editor {
  display: contents
}
```

to "ignore" those elements as children. 

And now I landed into the situation when the `[lang]` elements were basically not queryable:
- `display: contents` on `my-wc-editor` elements prevented these from being scrollable-to, meaning: ```target = document.querySelector(`my-wc-editor[lang="${lang}"]`)``` would return `null`.
- ShadowDOM in `my-wc-editor` would also prevent `.querySelector(All)` from piercing into it and finding its children: ```target = document.querySelector(`textarea[lang="${lang}"]`)``` would also return `null`.

Given that, I had to place some sort of a locator element outside `<my-wc-editor>`. 

```html
<section id="editors">
  <span class="lang-locator" lang="en"></span>
  <my-wc-editor lang="en"> <!-- with 'display: contents' these elements would not be reachable though -->
    <label></label>
    <textarea lang="en"></textarea>
  </my-wc-editor>
  <span class="lang-locator" lang="fr"></span>
  <my-wc-editor  lang="fr">
    <label></label>
    <textarea></textarea>
  </my-wc-editor>
  <span class="lang-locator" lang="de"></span>
  <my-wc-editor lang="de">
    <label></label>
    <textarea></textarea>
  </my-wc-editor>
  <!-- many more -->
</section>
```

Which, in turn, added a new child to the css grid and messed up the layout because, this grid had now three columns: `<span>`, `<label>`, `<textarea>`. This involved some css modifications to effectively hide it visually and compensate the gap with some margins. It was definitely doable, yet very clumsy. 

**What I wish I could do would be to hide the entire column containing `span.lang-locator` elements, along with the gap after it.**

This whole story is what has made me think of requesting a way to hide specific rows/columns from view, yet retain them in the DOM.

With a wider support for css `subgrid`, my specific case would probably got solved much easier. I'm sure though, being able to hide specific columns/rows (and having the property animatable) would contribute to quite interesting UI capabilities.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8867 using your GitHub account


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

Received on Tuesday, 23 May 2023 11:35:05 UTC