Вот простой макет сетки - поскольку вы используете макет, заполняющий область просмотра, я думаю, что вы можете отказаться от фиксированного и фиксированного позиционирования и вложенных сеток , удалить внутреннюю сетку контейнеры (grida
и gridb
) и упаковывают в контейнер :
display: grid;
grid-template-columns: 1fr 1fr; /* two columns */
grid-template-rows: auto auto 1fr; /* three rows */
grid-auto-flow: column; /* place grid items in column direction */
Теперь вы можете использовать grid-column: span 2
для navbar
- см. демонстрацию ниже:
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto 1fr;
grid-auto-flow: column; /* place grid items in column direction */
grid-column-gap: 9px;
height: 100vh;
}
.navbar {
background: lightseagreen;
color: white;
height: 27px;
grid-column: span 2; /* span both columns */
}
.grid {
background: silver;
}
.divtop {
background: lightgreen;
}
.story {
overflow-y: auto; /* overflow of content */
background: gold;
}
<div class="wrapper">
<div class='navbar'>NAVBAR</div>
<div class='divtop'>TOP</div>
<div class='story'>
some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here
some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text
here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some
text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here
some text here some text here some text here some text here
</div>
<div class='divtop'>TOP</div>
<div class='story'>
some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here
some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text
here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some
text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here
some text here some text here some text here some text here
</div>
</div>
Можно загрузить и установить Gitorious. Это - бесплатное размещающее мерзавца программное обеспечение с открытым исходным кодом. Я не уверен во всех функциях, которые это имеет, так более тщательно изучите, это могла бы быть правильная вещь для Вас.
Обновленный январь 2016:
Gitlab становится defacto стандартом для саморазмещенных клонов GitHub.
Gogs является более простым клоном, который мог работать хорошо на меньшие проекты.
При оплате за GitHub частный хостинг кажется самым быстрым путем. Сетевое средство просмотра является полностью собственным.
Существуют патчи, законченные на repo.or.cz, которые добавляют подобный интерфейс как gitk к ванили gitweb фронтэнд. Это или по крайней мере было, когда я попробовал его, полная боль для установки, но являюсь выполнимым для собственных проектов.
Вывод действительно похож на gitk, как он, или ненавидьте его, поэтому если Вы используетесь, которому это знакомо, по крайней мере. Вот графический журнал мерзавца сам.
Я соглашаюсь с запросом выше с GitHub, частные repos являются хорошим способом пойти даже для сольного разработчика.
Я также использую расширения Мерзавца на окнах, и это дает некоторые хорошие gui отдельно оплачиваемые предметы.