nestedrowskeleton-code

skeleton : two nested rows inside columns - howto?


i am new to skeleton and just put hands on it. i could not make work a mix of 1 row with inside a 4-columns block followed by a 8-columns block, where inside the 8-columns block should be 2 nested rows. it just blows all the grid.

i try to create kind of a picture gallery. (sorry, i can't post picture examples yet)

so for my logic it shoud be (just example code, not the real one):

<div class="container">
<div class="row">
    <div class="four columns">
            Picture content
    </div>
    <div class="eight columns">
        <div class="row">
            <div class="four columns alpha">
                Picture content
            </div>      
            <div class="four columns omega">
                Picture content
            </div>
        </div>  
        <div class="row">
            <div class="eight columns">
                Picture content
            </div>      
        </div>
    </div>      
</div>  

i followed some descriptions i found around the internet. but not working any idea what the construction of rows and columns should look like?


Solution

  • Solution found:

    my mistake: the second group of columns contains the nested row. This row contains NOT the 8 columns of the parent column-group bit a row-class div contains always 12 columns, independent of being a full row or just a part of a row (in case of a nested row)

    so the correct code is like:

        <div class="container">
            <div class="row">
                <div class="four columns">
                    Picture content
                </div>
                <div class="eight columns">
                    <div class="row">
                        <div class="six columns alpha">
                            Picture content
                        </div>      
                        <div class="six columns omega">
                            Picture content
                        </div>
                    </div>  
                    <div class="row">
                        <div class="twelve columns">
                            Picture content
                        </div>      
                    </div>
                </div>      
            </div> 
        </div> 
    

    this will result a little additional spacing inside nested rows, but it can be corrected by additional styling.