Gird item placement via CMS, why + 1?

[anthonysalamin]

Hello,

I have managed to manually place items on a grid using CMS values and simple custom code but I have to resort to using a hack or a trick to make it work. I would love to not have to use that hack.

Basically, I don’t understand why I have to add a + 1 column end and a + 1 row end to the value of the CMS. The values of the CMS are exactly the one from the “static grid”, so it should work also for the “dynamic grid”, except it doesn’t.

<style>
[data-title="{{Name}}"] {
  grid-column-start: {{grid-column-start}};
  grid-column-end: calc({{grid-column-end}} + 1); /* ⚠️ why + 1 ? */
  grid-row-start: {{grid-row-start}};
  grid-row-end: calc({{grid-row-end}} + 1);  /* ⚠️ why + 1 ? */
}
</style>

Here some screenshots:

here is my readonly link:

Webflow - 🔴 grid hell

[memetican (Michael Wells)]

Because Webflow is confusing you by making life easier.
Look at your top static grid, you have the positions specified as follows;

But if you look at the generated CSS…
That ending col is 4, and that ending row is 5.

Webflow’s doing that automatically in the UX for you because it makes sense.

The reason it makes sense is we think of columns and rows as the places where you put things. But the CSS spec approaches it differently, it counts position in terms of the column and row lines.

Illustrated, that looks like this;

So when you tell CSS grid-column-start: 2 and grid-column-end: 4, you’re telling it to draw the item between Lines 2 and 4. From your perspective ( and the Webflow designer’s representation ), that’s columns 2 & 3.

Why would the W3C do this? Well, we can only guess. One possibility is that maybe they want to leave open the possibility of fractional alignments, e.g. grid-column-start: 1.8 or mixed-unit implicit calcs like grid-column-end: 4 + 20px.

I don’t know this, but I like the thinking, would make for some creative overlapping bento layouts.

[anthonysalamin]

Wow, okay very interesting !
Thank you for having taken the time for the deep dive.
The illustration you shared helped me understand the issue, appreciate it !
Well I’ll stick to the calc + 1

[Stan (justAnotherDeveloper)]

@memetican

Because Webflow is confusing you by making life easier.

IMHO it is quite opposite. You expect to position area as you have set 2/2/3/4. When I will set row to start at horizontal line 2 and end on horizontal line 4 (means: occupy two rows) AND to col start at vertical line 2 and end on vertical line 3 _(means: occupy one col)_I will expect to be positioned correctly.

I do not even mention they have set inputs their own way to group these values together. I understand that as it makes more sense for non devs who are not familiar with CSS.

CSS it set as standard geometrical principle thing about it as area is FROM <top-left> TO <bottom-right>

grid-area: <grid-line> / <grid-line> / <grid-line> / <grid-line>
grid-area: <row-start> / <col-start> / <row-end> / <col-end>

grid-area: 1 / 1 / 2 / 2 /
above area: starts on horizontal line 1 and vertical line 1 and are ends on horizontal line 2 and vertical line 2

I understand that lines can be a bit confusing but in CSS you can name these if you need or want.

This is why I have different opinion because WF doesn’t follow web standards.

BTW: I only thinking about how this CMS hardcoded values work in media-queries.