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 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.