Question: Use o-grid with nested o-box?

[rowild]

Hi, nico,

I would like to use your library in a project, but would need your advice. I am not sure if this is the proper place to ask - if not, please redirect me - thanks!

My question:
How do I add padding to an ".o-grid__cell"? Usually I used ".o-box", but this one would currently override the display:flex (o-grid) to display:block (o-box) and therefore mess with the flex grid.

If I define a similar class - like .o-gridbox with only the padding, but no display attribute defined - I could manage the padding, but I do not know how to make resulting columns equal height.

Currently I have this:

<header class="o-wrapper o-wrapper--fullwidth">
    <div class="o-grid o-grid--stretch o-grid--auto">
      <div class="o-grid__cell u-1/2">
        <div class="o-gridbox has-green-bg">
          <h1>50%</h1>
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam ullam sed alias deserunt, libero eius illo ratione laudantium accusantium ducimus exercitationem dolorem fuga vel, in perspiciatis voluptates corporis nemo inventore!</p>
        </div>
      </div>
      <div class="o-grid__cell u-1/2">
        <div class="o-gridbox has-green-bg">50%</div>
      </div>
    </div>
  </header>

With these additional classes:

.o-wrapper--fullwidth {
  max-width: 100vw;
  background: red;
}

.has-green-bg {
  background-color: green;
}

.o-gridbox {
  padding: $inuit-global-spacing-unit;
}

The right box should cover the whole height ("stretch"?), but does not do so. I realize that it could be done by adding height: 100%; to .o-gridbox, but isn't that something stretch should do anyway?

I added a screenshot.

Would love to read you advices, thoughts and hints! Thanks!

[rowild]

Is this repo still managed?

[nicoqh]

@rowild, I'm sorry for the late reply! The notification got lost, but yes, the repo is still maintained.

Im not on my computer at the moment so I'll take a look at your question tomorrow (assuming it's still relevant) :)

[rowild]

@nicoqh Thanks for the feedback! It is not urgent, but still something I would love to know. Maybe even in general, since v7 is coming and use cases are most welcome!

[rowild]

@nicoqh Would still love to hear your opinion on this topic! I am really confused with the way stretch is supposed to work. Currently I mean to have read that stretch takes care about equally sizing columns, but it doesn't. It only does so, when a height: 100%is added.
Also, I added a screenshot, which I forgot, when I first posted this question.
Thanks a lot!

[nicoqh]

o-grid--stretch works as intended, but it doesn't cause the cell's children to obtain full heights -- only the cells themselves. So if you put a div inside the cell, this div is not "stretched".

Adding a background color on the cell itself is problematic because cells use padding to create gutters. This means that the whole cell element (including the padding) is filled with the color.

One possible solution:

Create a new class:

.o-grid__cell--colored {
  background-clip: content-box;
}

This will make sure that the background color doesn't apply to the padding.

Then, add a background color to the cell, and use the above class:

<div class="o-grid o-grid--stretch">
  <div class="o-grid__cell o-grid__cell--colored has-green-bg u-1/2">
    Hello
  </div>
</div>

(By the way: You don't need o-grid--auto when you use the spacing utilities.)

I'd love a cleaner solution, but I don't have any ideas at the moment. You could visit the unofficial inuitcss Slack and ask for help. I know herzinger uses this library, and I wouldn't be surprised if he had some input. If you do that, please keep this thread alive :)

[nicoqh]

@rowild Any further thoughts? :)

[rowild]

@nicoqh I must have overseen your response from January - sorry for that! And a late thank you!!!

I need to have a look at background-clip (haven' used it yet). Currently I use a third wrapper to which margin, padding and height: 100% is applied:

<div class="o-grid o-grid--stretch">
  <div class="o-grid__cell o-grid__cell--colored u-1/2">
    <div class="o-gridbox has-green-bg">
       Hello! "o-gridbox" is 100% high and has margin and padding (e.g. 20px). That way the bg remains colored, but the text still has padding and doesn't clash with the div's borders...
  </div>
</div>

A lot of wrapping, and it still needs handling on the opposite left/right border sites (and those in the middle, if there are more than 2 columns), so not the best solution. But I at least learned that there is no way around the "100%-height-assignment".

But maybe it would be better to be solved such issues with css-grid instead of flex - what do you think?

Thanks again for your precious feedback! And sorry for my delay!

[herzinger]

I realize this is old, but I came across this issue looking for something else, and I have something to add:
Since the inception of inuitcss, this grid concept always required an extra container inside the cell, and it's not recommended that you add additional styling to the grid cell itself. This is a flexbox based approach, but still follows the same base concept (with padding-based gutters and negative pulling on the main grid container), so it still applies. I also agree that applying the height: 100% to this container should not be the job of the grid, stretch or not. So by following this mindset, the background-clip trick is unnecessary, and the extra div, in @rowild's example o-gridbox is expected.