nicoqh / inuit-flexgrid Goto Github PK

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!

Nice extension of inuit!

Is there a reason why align-self isn't included?