I'm trying to perfect my grid layout first, before inserting image tags and SVG's. I added media queries to change the grid layout of the body and main element.
Notice that I commented out code within the section elements because I wanted to see how the overall grid layout looked before manipulating the elements within those grid items.
Here is what I am trying to achieve: https://ibb.co/Hzwd1tN
Here is my 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>
Here is my 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";
}
}
So if my media query is working, why does my main grid container not expand properly if there are multiple grid items within it.
Here you can see the dashboard and social status heading become clumped together like that. Why did that happen?
Because your grid-template-rows definition is not reflected in your grid-template-areas definition (you have to specify the same amount of units!) and you do not define a grid-template-rows property.
* {
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 1fr;
grid-template-columns: 80px 1fr;
grid-template-areas:
"header header"
"navigation main";
height: 100vh;
}
header {
background-color: #7279C2;
}
.side-navigation {
background-color: #4D4A77;
}
main {
background-color: white;
} <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>