Re: [csswg-drafts] [css-grid-2] Ability for grid items to automatically span rows and columns based on content size (#1373)

I've put together this Code Pen visualising how I would expect the logic behind auto-spanning to work:

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

The key points in the Code Pen are:

- Proposed syntax:
    - **Span forwards:** `grid-[row/column]: span auto;`
    - **Also span forwards:** `grid-[row/column]-end: span auto;`
    - **Span backwards:** `grid-[row/column]-start: span auto;`
    - **Span both forwards and backwards:** `grid-[row/column]: span auto / span auto;`
- The auto-placement algorithm can place auto-span grid cells onto new rows/columns if it needs to.
- Auto-span cells generally should not be able to generating new rows/columns through spanning. Only non-autospan grid cells can generate new rows/columns through spanning.
- If there are no valid rows/columns left that can be spanned, the auto-span grid cell starts growing in size instead. This in turn increases the size of the columns/rows that it is spanning.
- If a grid cell is set to span both columns and rows automatically, it spans columns first in an rtl or ltr language and rows first in an inline top to bottom language. When it reaches it's column limit (rtl) then it starts spanning rows.
- If a grid cell is set to span both backwards and forwards, it will span forwards first until it can't span forwards any further then it will span backwards (this needs more discussion, I'm not sure if this is the best method)

I also proposed non-preferred options for auto-spanning if the idea of auto-span cells not being capable of generating new rows/columns isn't feasible:

- **non-preferred row span limit:** It stops spanning rows when it is the only cell applying height to a row.
- **non-preferred column span limit:** It stops spanning columns at the end of the explicit grid.

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

Received on Saturday, 11 January 2020 07:17:01 UTC