Я пытаюсь улучшить свою сетку, прежде чем вставлять графические теги и SVG. Я добавил медиазапросы, чтобы изменить расположение сетки тела и основного элемента.
Обратите внимание, что я закомментировал код в элементах раздела, потому что я хотел посмотреть, как выглядел общий макет сетки, прежде чем манипулировать элементами внутри этих элементов сетки.
Вот что я пытаюсь достичь: https://ibb.co/Hzwd1tN
Вот мой HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/normalize.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/css-toggle-switch@latest/dist/toggle-switch.css" />
</head>
<body>
<header class="header">
<!-- <h1>YourApp</h1>
<div class="icon-bell-div">
<img src="icons/icon-bell.svg">
</div>
<div class="profile-name">
<img src="member-1.jpg">
</div>
<p>Josh Sullivan</p> -->
</header>
<nav class="side-navigation">
<!-- <ul class="navigation-items">
<li><a href="index.html"><img src="icons/icon-dashboard.svg"></a></li>
<li><a href="index.html"><img src="icons/icon-members.svg"></a></li>
<li><a href="index.html"><img src="icons/icon-visits.svg"></a></li>
<li><a href="index.html"><img src="icons/icon-settings.svg"></a></li>
</ul> -->
</nav>
<main>
<section class="search">
<h1>Dashboard</h1>
<input type="search" placeholder="Search">
</section>
<!-- TRAFFIC-->
<section class="traffic">
<!-- <h2>Traffic</h2>
<nav>
<ul>
<li>Hourly</li>
<li>Daily</li>
<li>Weekly</li>
<li>Monthly</li>
</ul>
</nav>
<canvas id="line-chart"></canvas> -->
</section>
<!-- DAILY TRAFFIC -->
<section class="daily-traffic">
<!-- <h2>Daily Traffic</h2>
<canvas id="bar-chart"></canvas> -->
</section>
<!-- MOBILE USERS -->
<section class="mobile-users">
<!-- <h2>Mobile Users</h2>
<canvas id="doughnut-chart"></canvas> -->
</section>
<!-- SOCIAL STATS-->
<section class="social-stats">
<h2>Social Stats</h2>
<!-- <div class="twitter">
<svg class="twitter-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<path class="twitter-path" fill="red" d="M32,3.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6C25.8,0.8,24,0,22.2,0
c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5C10.3,7.8,5.5,5.2,2.2,1.2c-0.6,1-0.9,2.1-0.9,3.3c0,2.3,1.2,4.3,2.9,5.5
c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1
c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,3,10.1,3c12.1,0,18.7-10,18.7-18.7
c0-0.3,0-0.6,0-0.8C30,5.6,31.1,4.4,32,3.1z"/>
</svg>
</div>
<div class="facebook">
<svg class="facebook-svg" enable-background="new 0 0 56.693 56.693" height="56.693px" id="Layer_1" version="1.1" viewBox="0 0 56.693 56.693" width="56.693px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path class="facebook-path" fill="green" d="M40.43,21.739h-7.645v-5.014c0-1.883,1.248-2.322,2.127-2.322c0.877,0,5.395,0,5.395,0V6.125l-7.43-0.029 c-8.248,0-10.125,6.174-10.125,10.125v5.518h-4.77v8.53h4.77c0,10.947,0,24.137,0,24.137h10.033c0,0,0-13.32,0-24.137h6.77 L40.43,21.739z"/>
</svg>
</div>
<div class="google">
<svg class="google-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<path class="google-path" fill="blue" d="M17.7,25.7c0-0.3,0-0.5-0.1-0.8c-0.1-0.2-0.1-0.5-0.2-0.7c-0.1-0.2-0.2-0.4-0.3-0.7c-0.2-0.2-0.3-0.4-0.4-0.6
c-0.1-0.2-0.3-0.3-0.5-0.6c-0.2-0.2-0.4-0.4-0.5-0.5c-0.1-0.1-0.3-0.3-0.6-0.5c-0.3-0.2-0.5-0.4-0.6-0.4s-0.3-0.2-0.6-0.4
c-0.3-0.2-0.5-0.4-0.6-0.4c-0.2,0-0.5,0-1,0c-0.7,0-1.4,0-2,0.1c-0.7,0.1-1.4,0.2-2.1,0.5c-0.7,0.2-1.3,0.5-1.9,0.9s-1,0.8-1.3,1.4
c-0.3,0.6-0.5,1.3-0.5,2.1c0,0.9,0.2,1.7,0.7,2.3c0.5,0.7,1.1,1.2,1.8,1.6s1.5,0.7,2.3,0.9s1.6,0.3,2.4,0.3c0.8,0,1.5-0.1,2.2-0.2
c0.7-0.2,1.3-0.4,1.9-0.8c0.6-0.3,1.1-0.8,1.4-1.4C17.5,27.2,17.7,26.5,17.7,25.7z M15.4,9.1c0-0.8-0.1-1.6-0.3-2.5
c-0.2-0.9-0.5-1.7-0.9-2.5c-0.4-0.8-0.9-1.5-1.6-2c-0.7-0.5-1.5-0.8-2.3-0.8c-1.2,0-2.1,0.4-2.8,1.3c-0.7,0.9-1,1.9-1,3.2
c0,0.6,0.1,1.2,0.2,1.9c0.1,0.7,0.4,1.3,0.7,2c0.3,0.7,0.7,1.3,1.1,1.8c0.4,0.5,0.9,1,1.5,1.3c0.6,0.3,1.2,0.5,1.9,0.5
c1.2,0,2.1-0.4,2.7-1.2C15.1,11.4,15.4,10.4,15.4,9.1z M12.9,0h8.4l-2.6,1.5h-2.6c0.9,0.6,1.6,1.4,2.1,2.4s0.8,2.1,0.8,3.2
c0,0.9-0.1,1.8-0.4,2.5c-0.3,0.7-0.7,1.3-1.1,1.8c-0.4,0.4-0.8,0.9-1.3,1.2c-0.4,0.4-0.8,0.8-1.1,1.2c-0.3,0.4-0.4,0.8-0.4,1.3
c0,0.3,0.1,0.7,0.3,1c0.2,0.3,0.5,0.6,0.8,0.9c0.3,0.3,0.7,0.6,1.1,0.9c0.4,0.3,0.8,0.7,1.2,1.1c0.4,0.4,0.8,0.8,1.1,1.3
c0.3,0.5,0.6,1,0.8,1.6c0.2,0.6,0.3,1.3,0.3,2c0,2.1-0.9,3.9-2.7,5.4c-1.9,1.7-4.6,2.5-8.1,2.5c-0.8,0-1.5-0.1-2.3-0.2
c-0.8-0.1-1.6-0.3-2.3-0.6c-0.8-0.3-1.5-0.7-2.1-1.1c-0.6-0.4-1.1-1-1.5-1.7C1,27.6,0.8,26.9,0.8,26c0-0.8,0.2-1.6,0.7-2.6
c0.4-0.8,1-1.5,1.8-2.1c0.8-0.6,1.8-1.1,2.8-1.4c1-0.3,2-0.5,3-0.7c0.9-0.1,1.9-0.2,2.9-0.3c-0.8-1.1-1.2-2-1.2-2.9
c0-0.2,0-0.3,0-0.5c0-0.1,0.1-0.3,0.1-0.4c0-0.1,0.1-0.2,0.2-0.4c0.1-0.2,0.1-0.3,0.1-0.4c-0.5,0.1-1,0.1-1.3,0.1
c-1.9,0-3.5-0.6-4.9-1.9c-1.4-1.3-2-2.8-2-4.7c0-1.8,0.6-3.4,1.8-4.8C6,1.7,7.5,0.8,9.3,0.4C10.5,0.1,11.7,0,12.9,0z M32.8,4.9v2.5
h-4.9v4.9h-2.5V7.4h-4.9V4.9h4.9V0h2.5v4.9H32.8z"/>
</svg>
</div> -->
</section>
<!-- NEW MEMBERS -->
<section class="new-members">
<!-- <div class="member">
<img src="images/member-1.jpg">
</div>
<div class="member">
<img src="images/member-2.jpg">
</div>
<div class="member">
<img src="images/member-3.jpg">
</div>
<div class="member">
<img src="images/member-4.jpg">
</div> -->
</section>
<!--RECENT ACTIVITY-->
<section class="recent-activity">
<!-- <div class="member">
<img src="images/member-1.jpg">
</div>
<div class="member">
<img src="images/member-2.jpg">
</div>
<div class="member">
<img src="images/member-3.jpg">
</div>
<div class="member">
<img src="images/member-4.jpg">
</div> -->
</section>
<!-- MESSAGE USERS -->
<section class="message-users">
<!-- <input type="search" id="site-search" placeholder="Search for User">
<textarea rows="10" cols="50" placeholder="Message for User"></textarea>
<input type="submit" id="site-search" value="Send"> -->
</section>
<!-- SETTINGS -->
<section class="settings">
<!-- <label class="switch-light switch-ios" onclick="">
<input type="checkbox">
<strong class="switch-light-text">
Send Email Notifications
</strong>
<span class="switch-light-span">
<span>Off</span>
<span>On</span>
<a></a>
</span>
</label>
<label class="switch-light switch-ios" onclick="">
<input type="checkbox">
<strong class="switch-light-text">
Set Profile to Public
</strong>
<span class="switch-light-span">
<span>Off</span>
<span>On</span>
<a></a>
</span>
</label>
<select name="timezone">
<option value="volvo" selected>Select a Timezone</option>
<option value="volvo">Volvo</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<div class="buttons">
<button>Save</button>
<button>Cancel</button>
</div> -->
</section>
</main>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script src="app.js"></script>
</html>
Вот мой CSS:
* {
box-sizing: border-box;
}
/*MOBILE */
header {
grid-area: header;
}
.side-navigation {
grid-area: navigation;
}
main {
grid-area: main;
}
/*NON-MOBILE */
.search {
grid-area: search;
}
.traffic {
grid-area: traffic;
}
.daily-traffic {
grid-area: daily-traffic;
}
.mobile-users {
grid-area: mobile-users;
}
.social-stats {
grid-area: social-stats;
}
.new-members {
grid-area: new-members;
}
.recent-activity {
grid-area: recent-activity;
}
.message-users {
grid-area: message-users;
}
.settings {
grid-area: settings;
}
/*BODY GRID*/
body {
display: grid;
grid-template-rows: 80px 80px 1fr;
grid-template-areas:
"header"
"navigation"
"main";
}
header {
background-color: #7279C2;
}
.side-navigation {
background-color: #4D4A77;
}
main {
background-color: white;
}
@media (min-width: 768px) {
body {
grid-template-rows: 80px 1fr;
grid-template-columns: 80px 1fr;
grid-template-areas:
"header header"
"navigation main"
}
main {
border: 2px blue solid;
}
main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 6fr 5fr 3fr 1fr 1fr;
grid-template-areas:
"search search"
"traffic traffic"
"daily-traffic mobile-users"
"social-stats social-stats"
"new members recent-activity"
"message-users settings";
}
}
Так что, если мой медиа-запрос работает, почему мой основной контейнер сетки не раскрывается должным образом, если в нем есть несколько элементов сетки.
Здесь вы можете увидеть, как панель инструментов и заголовок социального статуса так слипаются. Почему это случилось?