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

First and foremost, I must say it is incredible the work being done here, and I am delighted to engage in this conversation.

I am very passionate about CSS in general and I must say that Grid is not being used as much as I would like to see it being used especially when building layouts.

For context, my name is Astrit, and I work as a front-end developer at SEB. We are creating a design system for all our products using Lit. I want to share an example of how we leverage CSS Grid for enhanced layouts and discuss the benefits of implementing a masonry layout.

Within our development process, we employ Lit to construct our web components. One of the key layouts we utilize is named Grid, which uses attributes like columns, gaps, padding, and breakpoints. This Grid layout operates seamlessly and offers exceptional functionality.

Here is an example how we use it: 

```html
<gds-grid
  columns="l:8 m:4 s:2"
  gap="l:xl m:l s:xs"
  row-gap="l:xl m:l s:xs"
  padding="l:2xl m:l s:xs"
>
...
</gds-grid>
```
Might not be big fan of writing attributes this way but we are polishing this still 

Thus far, the results have met our expectations, providing us with highly responsive layouts utilising functions for 'grid-template-columns' like 'repeat' and 'min-max' functions.


Here is an example how that looks like 

```css

  @layer grid {
   /* When using columns prop */
    :host {
      --_c: var(--gds-sys-grid-columns-12);
      --_grid-col: repeat(var(--_c), 1fr);
      --_grid-col-start: 1;
      --_grid-col-end: -1;
      --_gap-column: 0;
      --_gap-row: 0;
      display: grid;
      width: 100%;
      grid-template-columns: var(--_grid-col);
      grid-column-gap: var(--_gap-column);
      grid-row-gap: var(--_gap-row);
      padding: var(--_grid-padding);
      text-wrap: balance;
    }

   /* auto columns which enables us to have columns that respond to content width */
    :host([auto-columns]) {
      --_col-count: var(--_c, 0);
      --_gap-count: calc(var(--_col-count) - 1);
      --_total-gap-width: calc(var(--_gap-count) * var(--_gap-column, 0px));
      --_col-width-max: calc(
        (100% - var(--_total-gap-width)) / var(--_col-count)
      );
      grid-template-columns: repeat(
        auto-fill,
        minmax(max(var(--_col-width), var(--_col-width-max)), 1fr)
      );
    }
  }
  
  ```
  
And this way we have managed to cover all the use cases we had except one, which is having a `masonry` layout, we already span in between columns and rows how ever if we had something like ` grid-template-rows: off; ` or `  grid-template-rows: masonry;` it would be super helpful to cover these types of layouts and with that pretty much is limitless and very efficient at the same time. 

I am not sure how the logic would follow if you have different language direction and if this logic should be similar for `columns` and `rows` but as of now any progress on this direction would be more than welcomed. 

And for the end I must say these types of things are a big factor of having a much more efficient, maintainable and smaller codebase. 

✌️
 
 

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


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

Received on Tuesday, 23 April 2024 19:57:06 UTC