Вадим Макеев, HTML Академия
Это 29 × 2 = 58, а 29 × 5 = божечки-кошечки…
<div class="header">
<h1>Заголовок</h1>
</div>
<div class="navigation"></div>
<div class="sidebar"></div>
<div class="content"></div>
.header {
text-align: left;
font: 55px Gotham Pro, sans-serif;
color: #ffffff;
opacity: 0.5;
}
<svg width="164" height="90">
<path fill="#ffffff" d="M19.205 40.66c8.03 0 13.475-4…
0-10.615-3.025-10.615-8.965 0-6.105 4.95-9.295 12…
40h4.235V15.305h15.07v-3.74H70.29V40zm35.663.66c-…
0-1.485-.22-2.035-.385L.945 89c.88.22 2.475.44 34…
11-12.32h-5.225l-15.565 16.39v-16.39h-4.235V89z"/>
</svg>
<div class="app">
<div class="header"></div>
<div class="navigation"></div>
<div class="sidebar"></div>
<div class="content"></div>
</div>
.app {
display: grid;
grid-gap: 25px;
grid-template-columns: 256px auto;
grid-template-rows: 256px auto;
}
.app div {
background: #4b86c2;
}
.app div:first-child { background: #c00; }
.app div:last-child { background: #090; }
.grid {
display: grid;
grid-gap: 25px;
}
grid-template-areas:
'header'
'navigation'
'content'
'sidebar'
'banner'
'footer';
.header { grid-area: header; }
.navigation { grid-area: navigation; }
.content { grid-area: content; }
.sidebar { grid-area: sidebar; }
.banner { grid-area: banner; }
.footer { grid-area: footer; }
grid-template-areas:
'header header'
'navigation navigation'
'sidebar content'
'banner footer';
grid-template-areas:
'header header header'
'navigation content sidebar'
'navigation content banner'
'footer footer footer';
@media (min-width: 512px) {
.grid { grid-template-areas: …; }
}
@media (min-width: 768px) {
.grid { grid-template-areas: …; }
}