Re: [csswg-drafts] [css-values] enable the use of counter() inside calc() (#1026)

If you need another example, this can be useful with overlapping grid items. In this example the user wants item1 to span both columns and item2 to be in the second column for each row. Doing this without counters requires explicit row numbers.

```css
#grid {
  display: grid;
  grid-template-columns: repeat(2, 20px);
  counter-reset: row;
}
.item1 {
  counter-increment: row;
  grid-column: 1 / span 2;
  grid-row: counter(row);
}
.item2 {
  grid-column: 2;
  grid-row: counter(row);
}
```
```html
<div id="grid">
  <div class="item1">1</div>
  <div class="item2">1</div>
  <div class="item1">2</div>
  <div class="item2">2</div>
</div>
```

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


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

Received on Wednesday, 17 May 2023 00:24:48 UTC