960 сетка - вложенные сетки имеют проблемы с компоновкой

Я только начал разрабатывать сайт для хобби и попытался использовать 960 css grid system для размещения моих элементов html на экране.

Я получил основную идею и просто реализовал сайт скелета здесь, на моем сервере

Есть несколько вопросов, которые у меня есть до сих пор:

<div class="container_12">
<div class="grid_12">
    <div id='top_bar' class='grid_insider'><!-- start of #top_bar -->

        <ul id='top_menu' class='grid_5'><!-- start of #top_menu -->
            <li>Home</li>
            <li>Fake1</li>
            <li>Fake2</li>
            <li>Fake3</li>
        </ul><!-- end of #top_menu -->
        <ul id='user_panel' class='grid_2 prefix_4'><!-- start of #user_panel -->

            <li>log in</li>
            <li>faq</li>
        </ul><!-- end of #user_panel -->

    </div><!-- end of #top_bar -->
</div>
<div class="clear"></div>
<div id='title_bar' class="grid_12">
    <h1 id="logo" align='center'>LOGO, TITLE and SLOGAN all go here!</h1>

</div><!-- end .grid_1 -->
<div class="clear"></div>

Я использую шаблон на основе сетки 12, поэтому общее число "сеток" для каждой "строки" должно быть 12. Однако я могу только сделать два элемента в одной и той же "строке" с общим количеством добавленных сеток до 11, но не 12. Если я изменил класС#user_panel на "grid_3 prefix4", то это фактически перенесет этот элемент в следующую строку, что сломает все.

Другое дело, хотя элементы первого уровня, такие как top_bar и title_bar, находятся в правильной позиции (вы можете подтвердить, что с помощью удобного плагина Firefox gridfox), с точной шириной 940 пикселей, вложенные сетки не находятся в позициях, которые они должны быть (немного отработанных позиций).

Я новичок в этой сетке css grid, есть ли лучший способ управлять элементами гнезда? Я должен сказать, что некоторые из примеров веб-сайтов на 960.gs выглядят довольно удивительно:)

Спасибо за любое предложение заранее!

Обновленная информация

Хорошо, основываясь на приведенном ниже ответе, я считаю, что по-прежнему можно использовать цветные границы при отладке вложенных сеток, есть способ adhoc "обмануть":

.grid_insider
{
    border : 1px solid red;
    margin : -1px; /* this will stop the element from 'expanding' its space */
}

Ответ 1

Не уверен, что вы еще не поняли, но структура предоставляет метод для вложенных элементов.

/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
------------------------------------------------*/

.alpha {
    margin-left: 0;
}

.omega {
    margin-right: 0;
}

Это переопределяет поля, которые они дают всем элементам сетки, таким образом позволяя элементам на стороне опираться на стороны их контейнеров.

Что вам нужно сделать, так это дать левой панели меню класс alpha, правый класс omega. Затем вам нужно будет удалить все границы, которые вы добавили к этим двум элементам и их контейнеру. Это связано с тем, что CSS float являются очень точными и будут разбиты, если вы сделаете элементы более крупными, чем определенная структура.

Если вам нужно добавить границы, вам придется добавить дополнительные стили, которые переопределяют их и дают им ширину в два пикселя (по одной для каждой стороны границы), меньшую, чем она определена в рамках.

Ответ 1

Ответ 2