[css-grid] Property to visually collapse columns or rows along with gaps around them #8867
Description
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
relevantmeans is difficult to determine for me, but I believe some appropriate syntax - using words likebefore,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:
<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:
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:
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:
<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:
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: contentsonmy-wc-editorelements prevented these from being scrollable-to, meaning:target = document.querySelector(`my-wc-editor[lang="${lang}"]`)would returnnull.- ShadowDOM in
my-wc-editorwould also prevent.querySelector(All)from piercing into it and finding its children:target = document.querySelector(`textarea[lang="${lang}"]`)would also returnnull.
Given that, I had to place some sort of a locator element outside <my-wc-editor>.
<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-
5C23
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. but in such a way that they remain locatable
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.