Я пытаюсь добиться разметки сетки, разделенной на области сетки
- область заголовка должна занимать всю верхнюю сетку контейнера "header header header" и
- Область боковой навигации, которая должна растягиваться под заголовком.
- В главном должны быть диаграммы, а под главным - нижний колонтитул с другим контентом, но когда я добавляю контент, он переходит в foor, но он вставляется в основной.
Есть ли способ, когда я добавляю контент, он остается в области сетки? Навигация растягивается, даже когда я даю ей максимальную ширину столбца ... Я прилагаю imgs для лучшего понимания. Большое спасибо
//=========================================================================
// Grid container
//=========================================================================
.container {
width: 100%;
height: 100vh;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 110px))
repeat(auto-fill, minmax(500px, 2fr))
repeat(autofill, minmax(400px,2fr));
grid-template-rows: repeat(auto-fill, minmax(100px, 100px))
repeat(auto-fill, minmax(200px,8fr))
repeat(auto-fill, minmax(150px,2fr));
// grid-template-columns: minmax(100px, 120px) minmax(500px, 2fr) minmax(400px,2fr);
// grid-template-rows: minmax(100px, 110px) minmax(200px,8fr) minmax(150px,2fr);
// grid-gap: 10px;
grid-template-areas:
"header header header"
"nav main main"
"nav footer footer";
}
<body>
<div class="container grid">
<!--HEADER-->
<header>
<div class="header">
<h1 class="logo">YourApp™</h1>
<div class="userProfile">
<div class="bell">
<img id="bell" src="icons/icon-bell.svg" alt="notifications" height="30" width="30"/>
</div>
<div class="user">
<img src="images/member-1.jpg" alt="Image of member 1" title="image_user_1">
<p>Member 1</p>
</div>
</div>
</div>
</header>
<!--SIDEBAR NAVIGATION-->
<nav class="navigation">
<div class="navFlex">
<ul>
<li>
<a href="#"><img alt="The dashboard icon" class="icon icon-dashboard" src="icons/icon-dashboard.svg"/></a>
</li>
<li>
<a href="#"><img alt="The members icon" class="icon" src="icons/icon-members.svg"/></a>
</li>
<li>
<a href="#"><img alt="the visits icon" class="icon" src="icons/icon-visits.svg"/></a>
</li>
<li>
<a href="#"><img alt="the settings icon" class="icon" src="icons/icon-settings.svg"/></a>
</li>
</ul>
</div>
</nav>
<!--MAIN-->
<main>
<div class="main-flex">
<div class="barChart">
<canvas id="barChart" width="400" height="400"></canvas>
</div>
<div class="lineChart">
<canvas id="lineChart" width="400" height="400"></canvas>
</div>
</div>
</main>
<!--FOOTER-->
<footer>
</footer>
</div>
<script src="app.js"></script>
</body>