Kevin Powell - Community•7d ago

Container grid system using react CSS modules, full-width being overridden by content-grid

I was following the "A new approach to container and wrapper classes" and trying to hook it up to a react project using CSS modules. However, when I use my full-width class it gets overwritten by the content-grid class. Is there an incapability with React CSS modules and this type of layout? Or am I missing something?

.content-grid {
  --padding-inline: 2rem;
  --content-max-width: 120ch;
  --breakout-max-width: 140ch;

  --breakout-size: calc(
    (var(--breakout-max-width) - var(--content-max-width)) / 2
  );

  display: grid;
  grid-template-columns:
    [full-width-start] minmax(var(--padding-inline), 1fr)
    [breakout-start] minmax(0, var(--breakout-size))
    [content-start] min(
      100% - (var(--padding-inline) * 2),
      var(--content-max-width)
    )
    [content-end]
    minmax(0, var(--breakout-size)) [breakout-end]
    minmax(var(--padding-inline), 1fr) [full-width-end];
}

.content-grid > :not(.breakout, .full-width),
.full-width > :not(.breakout, .full-width) {
  grid-column: content;
}

.content-grid > .breakout {
  grid-column: breakout;
}

.content-grid > .full-width {
  grid-column: full-width;

  display: grid;
  grid-template-columns: inherit;
}

.content-grid {
  --padding-inline: 2rem;
  --content-max-width: 120ch;
  --breakout-max-width: 140ch;

  --breakout-size: calc(
    (var(--breakout-max-width) - var(--content-max-width)) / 2
  );

  display: grid;
  grid-template-columns:
    [full-width-start] minmax(var(--padding-inline), 1fr)
    [breakout-start] minmax(0, var(--breakout-size))
    [content-start] min(
      100% - (var(--padding-inline) * 2),
      var(--content-max-width)
    )
    [content-end]
    minmax(0, var(--breakout-size)) [breakout-end]
    minmax(var(--padding-inline), 1fr) [full-width-end];
}

.content-grid > :not(.breakout, .full-width),
.full-width > :not(.breakout, .full-width) {
  grid-column: content;
}

.content-grid > .breakout {
  grid-column: breakout;
}

.content-grid > .full-width {
  grid-column: full-width;

  display: grid;
  grid-template-columns: inherit;
}

Kevin Powell

YouTube

A new approach to container and wrapper classes

The wrapper or container is probably the most common design pattern around, but after coming across an article by Stephanie Eckles looking at how we can use a grid to emulate a container, and have simple breakouts — https://smolcss.dev/#smol-breakout-grid — I had an idea of how we could do this to completely drop the idea of containers, and then...

6 Replies

b1mind•7d ago

Can you share a minimal example of what you have? Sounds like an issue with hierarchy/specificity maybe

b1mind•7d ago

https://codepen.io/b1mind/pen/oNKYKjv?editors=0100

Kevins starter

...

b1mind•7d ago

Here is a maybe more "updated" version of how Kevins been doing it. Its less direct child selectors, no sure if that might help ya

LexiOP•7d ago

Sure, so I have my page layout where I have a div wrapping the entire content in a "content-grid" class. Then I'm setting up a component of navigation which is getting the class of "full-width". Page loaded on:

<div className='content-grid'>
      <Navigation />
</div>

<div className='content-grid'>
      <Navigation />
</div>

Navigation component is:

<nav className='full-width'>
      <ul className={styles.navigation}> 
             <li></li>
      </ul>
</nav>{styles.navigation}>

<nav className='full-width'>
      <ul className={styles.navigation}> 
             <li></li>
      </ul>
</nav>{styles.navigation}>

The content-grid class itself is in a global.css file wrapping my entire application. Nevermind, upon further investigation I am silly and didn't look at my code closely enough. Thank you, @b1mind!

b1mind•7d ago

So full-width inherits the grid template from content-grid Oh no worries you got it ? 👏

LexiOP•7d ago

I did indeed

Gaming

Programming

Container grid system using react CSS modules, full-width being overridden by content-grid