skeleton : two nested rows inside columns - howto?

Question

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?

score 0 · Accepted Answer · answered Apr 06 '15 at 11:45

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.

skeleton : two nested rows inside columns - howto?

1 Answers1