use inline custom props to determine Grid Object layout

[chharvey]

allow custom properties to determine layout:

.o-Grid {
  grid-template-rows   : repeat(var(--rows, 1), 1fr);
  grid-template-columns: repeat(var(--cols, 1), 1fr);
}

<ul class="o-Grid" style="--rows: 2; --cols: 3;">
  <li class="o-Grid__Item">1</li>
  <li class="o-Grid__Item">2</li>
  <li class="o-Grid__Item">3</li>
  <li class="o-Grid__Item">4</li>
  <li class="o-Grid__Item">5</li>
  <li class="o-Grid__Item">6</li>
</ul>

In the future:

.o-Grid {
  grid-template-rows   : repeat(attr(data-rows integer, 1), 1fr);
  grid-template-columns: repeat(attr(data-cols integer, 1), 1fr);
}

<ul class="o-Grid" data-rows"2" data-cols="3">
  <li class="o-Grid__Item">1</li>
  <li class="o-Grid__Item">2</li>
  <li class="o-Grid__Item">3</li>
  <li class="o-Grid__Item">4</li>
  <li class="o-Grid__Item">5</li>
  <li class="o-Grid__Item">6</li>
</ul>