Nested rows/columns

[andrewQwer]

Hi guys,

How should I use nesting? For example if I declared grid and grid__col-12 inside and I want to split col-12 into 3 cells for example. Should I include another grid inside col-12 or I can declare col-x directly in col-12?
Example:

<div class='grid'>
   <div class='grid__col12'>
       
       <div class='grid'> /* should I delcare this div? */
          <div class='grid__col-4'></div>
          <div class='grid__col-4'></div>
          <div class='grid__col-4'></div>
       </div>
   </div>
</div class='grid'>

Thanks

[jacmanh]

Yes you should, if you don't do it it's not working anyway :)
Look at the demos on leejordan's website : http://leejordan.github.io/reflex/docs/demo.html

If look at the second grid styles, you should see :
flex: 1 1 auto;
It's like reseting the grid if i'm not wrong.

[andrewQwer]

thanks @jacmanh

Yes you should, if you don't do it it's not working anyway :)

It works even without additional grid wrapper that is why I am asking :)

[jacmanh]

Are you sure ? I just test it and it doesn't with this code :

<div class='grid'>
            <div class='grid__col-12'>
                <div class='grid__col-4'>tt</div>
                <div class='grid__col-4'>ii</div>
                <div class='grid__col-4'>oo</div>
            </div>
        </div>

If you tested it with your code above, it will work because you misspell grid__col12, you forgot a dash.

[andrewQwer]

Take a look at this example please https://jsfiddle.net/wstezt1k/
The only difference is that grid wrapper doesn't required grid--direction-row as it is by default for grid. But for grid__col-x we need to define it explicitly

[leejordan]

Well as you discovered it's fairly flexible and you can do it either way - either with a grid nested inside a grid__col or by setting grid--direction-row on the parent grid__col. Either works and I use both in production on my various websites.

However I would argue that nesting a grid inside a grid__col before setting further grid__col elements is the most understandable way of doing it because you're explicitly saying "this is a child grid of a parent grid"

[andrewQwer]

Thank you!

[frabonomi]

Though if you want to follow BEM rules, you wouldn't apply a modifier of grid to grid__col. grid--direction-row should just be applied to an element that has the grid class.

[leejordan]

That's a good point too. There's a few occasions where a class can be applied to either a grid or a grid__col. Would you advocate creating two separate classes for that purpose even though they would apply the exact same properties?

[frabonomi]

That's what I would do honestly, even if that results in a longer class. What are the classes that you can apply to both grid and grid__col currently?

[andrewQwer]

But what if I want row direction for grid__col-x element?