CSS Grid UI

[kof]

Lets have a look what the best UI for CSS Grid would look like

[itsNintu]

I like this topic :)

Here's my personal humble opinion: https://tella.video/alexs-opinions-on-grid-1-9ry3

Breakdown:

On parent (where display grid is defined): Have the option to set:

• Grid flow (row/col)
• Grid columns (number/auto)
• Grid rows (number/auto)
• Keep our existing layout options like we have for flex (justify, align, gap, etc)

And on children:

• Subcategory called "Grid child" (similar to how we have "flex child")
• Inside of this category the option to set row span number + col span number)
• Inside of this category the option to set row start number + col start number)

[TrySound]

Here's a great write about almost universal auto-grid layout. We could create a ui for it or just share as section template (better have css custom properties at this point)

https://9elements.com/blog/building-a-rock-solid-auto-grid/

[kof]

@TrySound autogrid sounds like a great idea for a template or a component (if we wanted to control it via props)

[TrySound]

I'd go with template with set custom properties to support customization

[youngjid]

I'm really so excited for this particular feature.

On my usual activities across the internet, i came across these particular UI Grid Builder's specifically implemented in Penpot App and another on Bricks Builder, whereby you can visually interact with grids and create different layouts.

Here are some Examples

PenPot: https://youtu.be/k5AZoQC-OZk?t=259 Bricks Builder: https://youtu.be/x6SZz8hMAVE?t=96

It's a very intuitive way to visually create grids and especially if possible in Web Studio.

I thought i would drop this idea here just to get your opinion on it.