[csswg-drafts] [css-grid] grid-item pseudo-class (#4097)

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

== [css-grid] grid-item pseudo-class ==
I often set grid-item properties on elements which by design I shouldn’t have much context about. For example when laying out different children on a (reusable) parent grid. This results in having to match grid-items based on their specific attributes (e.g. class names).

It would be great to be able to set the layout logic in a parent and separate it from children.

Instead of:

```html
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
```

```css
.parent {
  display: grid;
}

.child {
  grid-column: 1 / 2;
}
```

We would have:

```html
<div class="parent">
  <div></div>
  <div></div>
  <div></div>
</div>
```

```css
.parent {
  display: grid;
}

.parent:grid-item {
  grid-column: 1 / 2;
}
```

This way we wouldn’t have to assume much about child grid-items.

As a workaround I’ve been using the `.parent > *` compound selector to match grid items, but this is not ideal as the parent and children have the same specificity.

My main argument is to set all layout logic in a parent and have children follow the rules while being completely context-agnostic.


Cheers!

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

Received on Wednesday, 10 July 2019 04:13:56 UTC