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)

[bartaz]

Triage: Looks like quite likely grid works as expected (at least in most cases). Adding more nesting functionality is quite high effort to address it now, with relatively low impact (we don't need it too often). Dropping for now, grid can be revisited in new architecture.

[syncronize-issues-to-jira]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-15276.

This message was autogenerated