Re: [csswg-drafts] [css-grid] Introducing overlapping cells in grid-template-areas syntax

• From: Daniel Tonon via GitHub <sysbot+gh@w3.org>
• Date: Sat, 17 Nov 2018 02:43:04 +0000
• To: public-css-archive@w3.org
• Message-ID: <issue_comment.created-439581489-1542422582-sysbot+gh@w3.org>

Your proposed syntax example isn't very clear 😕. This is how I think the syntax should work:

![grid-areas-visual](https://user-images.githubusercontent.com/10610368/48655641-babbba00-ea6d-11e8-8311-5532efecccdd.png)

https://codepen.io/daniel-tonon/pen/dQzOav

**New proposed syntax:**

```css
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "a   a   ."
    "a [a b] b"
    "a   a   .";
}
.cell-a {
  grid-area: a;
}
.cell-b {
  grid-area: b;
}
```

This aligns with how multiple line names works so I think it would be very intuitive for authors to pick up on.

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

Received on Saturday, 17 November 2018 02:43:05 UTC