CSS Grid UI - Githubissues

webstudio-is / webstudio

Open source website builder and Webflow alternative. Webstudio is an advanced visual builder that connects to any headless CMS, supports all CSS properties, and can be hosted anywhere, including with us.

https://webstudio.is

GNU Affero General Public License v3.0

5.39k stars 662 forks source link

CSS Grid UI #3057

Open kof opened 8 months ago

kof commented 8 months ago

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

itsNintu commented 8 months ago

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 commented 8 months ago

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 commented 8 months ago

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

TrySound commented 8 months ago

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

youngjid commented 3 months ago

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.

BeanIamonte commented 22 hours ago

Maybe take inspiration from Boostrap Studio (which is a Boostrap site builder) on PC. Even if the grid system is based on Boostrap (12 columns), I really like the design and the way it offers this. You can test the software online for free here: https://bootstrapstudio.io/

Webstudio can take inspiration from