Скелет: две вложенные строки внутри столбцов - как?

Question

Я новичок в скелете и просто положил на него руки. я не мог сделать работу смесью из 1 строки внутри блока из 4 столбцов, за которым следовал блок из 8 столбцов, где внутри блока из 8 столбцов должно быть 2 вложенных строки. это просто уносит всю решетку.

Я пытаюсь создать вид картинной галереи. (извините, я пока не могу опубликовать примеры изображений)

так что для моей логики это должно быть (просто пример кода, а не реальный):

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

Я следовал за некоторыми описаниями, которые я нашел в Интернете. но не работает идея, как должна выглядеть конструкция строк и столбцов?

Answer 1

Решение найдено:

Моя ошибка: вторая группа столбцов содержит вложенную строку. Эта строка НЕ ​​содержит 8 столбцов родительского бита группы столбцов, а div класса строк всегда содержит 12 столбцов, независимо от того, является ли она полной строкой или просто частью строки (в случае вложенной строки)

поэтому правильный код выглядит так:

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

это приведет к небольшому дополнительному интервалу внутри вложенных строк, но это можно исправить с помощью дополнительного стиля.