Grid: provide 3 levels of nesting

[lyubomir-popov]

Component/pattern to amend

The grid currently works to a dpeth of 2 levels of nesting.

Here's a design that needs 3:

medium screens:

large screens:

And here's what happens when you try to build it:

Can we please add the 3rd level, including for .row--* components

[lyubomir-popov]

Seems to not work even at just 2 levels of nesting:

[lyubomir-popov]

Something very strange, we do have at least 2 nested levels defined in the css - see top right, but it doesn't work:

code fro this screenshot:

<section class="p-strip is-shallow">
  <hr class="p-rule">
  <div class="row">
    <div class="col-3">
      <h2 class="p-heading--2">Resources</h2>
    </div>
    <div class="col-8">
      <div class="row">
        <div class="col-3 col-medium-1">
          <h3 class="p-heading--5" data-gtm-vis-recent-on-screen1014405_499="92" data-gtm-vis-first-on-screen1014405_499="92" data-gtm-vis-total-visible-time1014405_499="100" data-gtm-vis-has-fired1014405_499="1">eBook</h3>
        </div>
        <div class="col-medium-3">
          <p data-gtm-vis-has-fired1014405_503="1"><a href="https://pages.ubuntu.com/Forrester_TAP_Report_2016.html">Forrester Research - get more from the cloud</a></p>
        </div>
      </div>
    </div>
    <div class="col-3 col-medium-4">
      <h3 class="p-heading--5" data-gtm-vis-has-fired1014405_499="1">Whitepaper</h3>
      <p data-gtm-vis-has-fired1014405_503="1"><a href="http://www-01.ibm.com/marketing/iwm/dre/signup?source=stg-web&amp;S_PKG=ov47989&amp;S_TACT=C47305CW">IDC - next generation applications on Ubuntu for LinuxONE/z</a></p>
      <hr class="u-hide--large">
    </div>
    <div class="col-3 col-medium-4">
      <h3 class="p-heading--5" data-gtm-vis-has-fired1014405_499="1">Webinar</h3>
      <p data-gtm-vis-has-fired1014405_503="1"><a href="https://www.youtube.com/watch?v=WxTAd0zqruA">Discover the Cloud and scale out world of Ubuntu on IBM</a></p>
      <hr class="u-hide--large">
    </div>
  </div>
</section>

[bartaz]

@lyubomir-popov can you paste links to the pages where it actually happens, there maybe something else going on

Nesting does work on Vanilla grid: https://vanillaframework.io/docs/examples/patterns/grid/nested

[lyubomir-popov]

ended up doing something else, so no actual pr with this.

[lyubomir-popov]

@bartaz but just pasting the markup above into the vanilla nesting example (no css other than what is in vanilla), it still doesn't work:

[lyubomir-popov]

think I found it - this works:

this doesn't:

[bartaz]

this doesn't:

@lyubomir-popov this doesn't work because there is no col defined for desktop, so it likely assumes 12 column. It needs to define how many columns on desktop it uses.

[bartaz]

Grid nesting works as expected, to any level with standard low level grid class names (row, etc).

With shorthand row--25-75 nesting works on first level (row--25-75 > col > row), but fails on deeper levels. Issue seems to be caused by CSS specificity and conflict between styles applied by standard .col-X > .row vs styles applied by row--25-75.

So we can have a look at fixing this on deeper levels. But it may require making some strict assumptions on markup (such as nested row is always direct child of it's parent col-), because otherwise nested rows will not know which of parent cols should define it's size.

Exploration on CodePen: https://codepen.io/bartoszopka/pen/dyLWOEO

[bartaz]

@lyubomir-popov BTW, by "3 levels of nesting" do you mean, having 3 grids:

row--25-75 > nested row > another nested row

or actually 3 nested grids, 4 in total?

row--25-75 > nested row > nested row > nested row (which seems like a lot)