Dynamically change grid span based on siblings

This might be tricky to explain but I’ll try.

I have the following scenario: in a template I have created, there are four variants of possible interior pages. These are:

  1. left navigation / core content / right sidebar
  2. left navigation / core content
  3. core content / right sidebar
  4. core content

Currently, each style requires me to tweak the grid-column-start property of .core-content. or “Column span” under “Grid Child” as Webflow calls it. (As an aside, the way Webflow treats grid-column-start/etc is very strange to me. Why doesn’t it carry across pages? Why is it pink? Is there documentation I’ve missed?)

What I would like to accomplish is a way to tell .core-content to correctly place itself without me needing to change the “Column span” on every individual page. I’ve been googling this for a while to no avail. I presume a solution would in some way involve having .core-content look at its siblings and deciding based on their presence or absence what its grid-column-start would be, which seems like it might be a problem for JS. I don’t know JS, though, and would appreciate help on how to accomplish this—or just to be told if it’s impossible.

Thanks! The read-only is below.


Read-Only: [LINK]

Bump, hoping to find a concrete answer to this.

If I’m understanding the goal, you’re trying to have the page layout change based on the number of sidebars present on any of these pages — is that correct? And are these going to be static pages or are you planning to use the CMS?

Typically simple, single-direction layouts are best suited for the flexbox as opposed to CSS grid, so I’d recommend using that instead.

Assuming you’re using the CMS, you’d just need to give your sidebar content some conditional visibility (based on whichever factor you’d like about the collection item) along with some min/max widths on your columns and the layout will react as expected based on the number of sidebars on any of these pages.

Hopefully that helps solve the issue but don’t hesitate to reach out with any additional information if I’m misunderstanding anything.

Thanks for taking a look!

Webflow’s CMS won’t be used. The company I work for slices up these designs for use with our own backend later, and I’m basically trying to find a way to give them a single page template that can adapt itself to the end user’s selected choice of “what columns does this page have.” Flex probably is the better solution given my use case here, you’re right. The fussy part of my brain will be mad I can’t use grid but I’ll survive :slight_smile:

1 Like

Awesome, glad it sounds like flexbox will work for you on the project!

For now I’ll mark your response as the solution but if you run into any issues, don’t hesitate to reach out here in this thread :webflow_heart: