Grid Column

At a glance

A community member asked if there is a way to use grid-column: 1 / span 9; instead of grid-column-start: 1; and grid-column-end: span 9; in a 12-column grid. Another community member responded that only the longhand properties are currently supported. The discussion also covered the lack of grid-column-gap and grid-row-gap, with the recommendation to use column-gap and row-gap instead. Additionally, a community member asked about rebuilding a grid token from a style guide, and was informed that the CSS Grid Embed is a legacy solution, and the recommended approach is to use the Advanced Settings Panel.

MMano

Hey, is there a way to use grid-column: 1 / span 9; instead of grid-column-start: 1; and grid-column-end: span 9;? I set a 12 col grid with grid-template-columns: repeat(12, minmax(0, 1fr));

10 comments

BBogdan

Not at the moment, only longhand properties are supported

MMano

Allright, thx ✌️

MMano

I'm also missing grid-column-gap and grid-row-gap 👀

BBogdan

Those we will never support 😉

BBogdan

Use column-gap and row-gap instead 🙂

MMano

Oh nice, did not know those 👍 at the moment i compare everything with webflow 🙈

BBogdan

They were added to universally support both grid and flex and maybe future specs as well.

MMano

Phantastic Webstudio Support here btw 🙏 thank you very much!

MMano

Another grid question @TrySound – I cloned the Creator Style Guide from Alex and found a grid token. I've tried to rebuild this token in my project, but there is no grid option in the display: dropdown. I know that I can add display: grid under Advanced but I'm curious how Alex solved this without using the Advanced Settings Panel 🤔...hope u can help again.

I also copied the CSS GRID Embed

BBogdan

grid embed is legacy solution, current recommendation is to use advanced panel

Add a reply

Join the Webstudio community

Grid Column