CSS grid numbering - Webflow vs pure CSS

I’m new to Webflow, but familiar with CSS grid.

I spent a good half hour trying to figure out why my grid child elements were spanning more rows and columns than they should until I realized that Webflow’s numbering pattern for CSS grid layouts is based on grid tracks (where the content goes).

CSS grid numbering is based on grid lines.

Shouldn’t this key difference be clarified in the docs for people who come to Webflow with a familiarity with CSS Grid?

Example:

In CSS, if we want a div to span the first two columns of a grid, and to take up only the fourth row, we do something like:

div.2-col {
  grid-column: 1/3;
  grid-row: 4/5;
}

But in Webflow, we set column start to 1, column end to 2, and row start and end both to 4.

Since I didn’t see anything in the docs about this, or in the forum, perhaps this can be useful to anyone else who’s confused when coming to Webflow already familiar with CSS Grid.

I feel your pain, but this is not only things that WF does their way ignoring conventions and/or standards. But 90% of people using WF are not developers so they do not know and learn it the Webflow-way, most developers use custom code anyway. :person_shrugging:

1 Like

I’ve so far chosen to go with using custom CSS (via the aweome Sass plugin) only as needed, and doing styling as much as possible using the UI, but I’m just still getting familiar with the UI so…

Maybe this warrants a different post, but I’m curious whether a mixed approach like that or just maximizing using styles in code blocks is the way forward for someone familiar with CSS

More you will dive into WF more you will realise that WF functionality limited and provided styling UI is minimal. So beside provided styling UI you will need custom code most of the time.

Thanks. So do you generally just avoid styling in the UI altogether?

No, but sometime is better to use custom code instead WF UI.

1 Like