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