Kevin Powell - CommunityKP-C
Kevin Powell - Community•2y ago•
11 replies
EmSixTeen

Having trouble adding a sidebar to my grid system

I'd really love help here if someone can dissect and figure out my dilemma.

I have this WordPress site which is built using Advanced Custom Fields' flexible content fields. It's not using Gutenberg/the block builder.

The user can add a section (<section>). They have some basic options, like class and background colour

↳ Inside each section they can nest what we're calling blocks, several if desired. Think text block (<div>), image block (<figure>), infobox (<div>), etc.). The blocks have some basic options, like class, background colour, and importantly width - narrow, standard, or wide.

I set up a CSS grid to automatically give the children a width, whether the chosen narrow, standard, or wide. Standard is default. See here:

  --grid-spacing-full: minmax(0px, 1fr);
  --grid-spacing-wide: clamp(0px, 2.5vw, 100px);
  --grid-spacing-standard: clamp(0px, 5vw, 100px);
  --grid-spacing-narrow: clamp(1px, 70vw, 750px);

  --section-grid: [full-start] var(--grid-spacing-full) [wide-start]
    var(--grid-spacing-wide) [standard-start] var(--grid-spacing-standard)
    [narrow-start] var(--grid-spacing-narrow) [narrow-end]
    var(--grid-spacing-standard) [standard-end] var(--grid-spacing-wide)
    [wide-end] var(--grid-spacing-full) [full-end];

  > * {
    grid-column: standard;
  }


🚨🚨🚨
So, my actual issue here is that I want to also incorporate a sticky sidebar on some pages. How on earth can I do that? It feels like I need an entirely new grid system but I'm dizzy running myself in circles now. The sections span the full width of the page, and they need to continue to so that I get the full-width background colours per section, while the content should take up the left 3/4 of the content-container.. but then how am I do actually make a sticky sidebar stay atop those on the rightmost 1/4? So that it can scroll down along the page? Is this explanation even making sense? 🥲
🚨🚨🚨

Pen here: https://codepen.io/emsixteen/pen/dyrmZJN
CodePenAaron Gregg
CSS Grid brainstorming
...
CSS Grid brainstorming
Was this page helpful?