Menu icon Foundation
Combine multiple elements into one column?

Is it possible when using @include grid-column etc. to merge multiple elements into one column or somehow to create a surrounding container on the fly only using scss?

In other words, can I create a nested grid from an unordered list without hierarchy using scss?

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
</ul>
         
<div class="row">
    <div class="column">
        <div class="row">
            <div class="column">a</div>
            <div class="column">b</div>
        </div>
    </div>
    <div class="column">c</div>
    <div class="column">d</div>
</div>

         

gridcolumnhierarchy

Is it possible when using @include grid-column etc. to merge multiple elements into one column or somehow to create a surrounding container on the fly only using scss?

In other words, can I create a nested grid from an unordered list without hierarchy using scss?

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
</ul>
         
<div class="row">
    <div class="column">
        <div class="row">
            <div class="column">a</div>
            <div class="column">b</div>
        </div>
    </div>
    <div class="column">c</div>
    <div class="column">d</div>
</div>

         

This post has been closed. No new replies can be added.

Rafi Benkual over 4 years ago

You will need some sort of structure in your HTML and classes. Like this: http://sassmeister.com/gist/567e50ef48d0a24ea066

Although I am unclear what you mean by nesting.

digi over 4 years ago

Thank you Rafi. The "nesting" was actually the core of my question. In the example above I tried to place two colums with content "a" and "b" at a different hierarchical level than the columns with the content "c" and "d".

This would not be a problem if I used a list with different levels:

<ul>
  <li>
    <ul>
      <li>a</li>
      <li>b</li>
    </ul>
  </li>
  <li>c</li>
  <li>d</li>
</ul>

But I am trying to find out, whether I could achieve this with a flat list, where all the li elements are siblings. The reason behind this question is, that I would like to use media queries to have a quite different representation and structure of the content on mobile and desktop versions.

My question is, whether there is a trick to manipulate the hierarchy via scss/css (and not by the initial html structure or jQuery)

Rafi Benkual over 4 years ago

In CSS - no

With jQuery or JS - yes

As long as there is HTML structure on the page at some point, you can manipulate it with CSS.