Re: [csswg-drafts] [css-grid-3] Designer/developer feedback on masonry layout (#10233)

> I tried to achieve this layout with just CSS and no JavaScript, but I found that I was unable to. CSS Grid with auto columns comes close, but I couldn't get the cards to fill in available space. If the content was static, it would be no problem, but the content is dynamic and I can't provide an explicit column span ahead of time.

IMO, I think your example is better suited for CSS Grid than masonry. In fact, this would be great with named lines:

```css
#calendar {
  display: grid;
  grid-template-columns: [monday] 1fr [tuesday] 1fr ...;
  grid-template-rows: [t0900] 1lh [t0915] 1lh ...; /* Probably needs to be generated, needs a lot of lines. */
}

#COMP3704_S2_1 {
  grid-column: monday;
  grid-row: t1000 / t1130; /* Must start with alpha, omitting special chars */
}
```

For conflicting events (like the first events on Tuesday in your example), I'd probably consider subgrid to continue aligning with the times but try `repeat(auto-fill)` for the column. Definitely an interesting problem regardless! Might even give it a shot myself in my free time. Thanks for sharing.


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


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

Received on Tuesday, 30 July 2024 21:41:48 UTC