Abraham Martinez
Reputation: 65
Grid area do not adapt to the container height
body {
font-family: 'Rubik', sans-serif;
.container {
background: red;
width: 80%;
height: 60%;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
//Grid
display: grid;
grid-template-rows: repeat(2,1fr);
grid-template-columns: repeat(4,1fr);
gap: 10px;
grid-template-areas:
"report work play study"
"report exercise social selfcare";
report{
grid-area:report;
}
work-container{
grid-area:work;
}
play-container{
grid-area:play;
}
study-container{
grid-area:study;
}
exercise-container{
grid-area:exercise;
}
social-container{
grid-area:social;
}
selfcare-container{
grid-area:selfcare;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="/css/styles.css">
<link rel="stylesheet" href="/css/stylesDesk.css">
<link rel="stylesheet" href="normalize.css">
<script src="https://kit.fontawesome.com/7461cf9184.js" crossorigin="anonymous"></script>
<title>Frontend Mentor | Time tracking dashboard</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
<div class="container">
<!-- Report info container -->
<div class="report">
<div class="info">
<img src="images/image-jeremy.png" alt="">
<div class="person-info">
<h2 class="title">
Report for
</h2>
<h3 class="name">
Jeremy Robson
</h3>
</div>
</div>
<div class="footer">
<p>Daily</p>
<p>Weekly</p>
<p>Monthly</p>
</div>
</div>
<!-- Work category container -->
<div class="work-container">
<div class="img">
<img src="images/icon-work.svg" alt="">
</div>
<div class="work">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Work
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
5hrs
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 7hrs
<!-- daily -->
</p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
32hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 36hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
103hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 128hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Play -->
<div class="play-container">
<div class="img">
<img src="images/icon-play.svg" alt="">
</div>
<div class="play">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Play
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
1hr
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 2hrs
<!-- daily -->
</p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
10hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 8hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
23hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 29hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Study -->
<div class="study-container">
<div class="img">
<img src="images/icon-study.svg" alt="">
</div>
<div class="study">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Study
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
0hrs
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 1hr
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
4hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 7hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
13hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 19hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Exercise -->
<div class="exercise-container">
<div class="img">
<img src="images/icon-exercise.svg" alt="">
</div>
<div class="exercise">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Exercise
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
1hr
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 1hr
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
4hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 5hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
11hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 18hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Social -->
<div class="social-container">
<div class="img">
<img src="images/icon-social.svg" alt="">
</div>
<div class="social">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Social
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
1hr
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 3hrs
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
5hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 10hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
21hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 23hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Self-care -->
<div class="self-care-container">
<div class="img">
<img src="images/icon-self-care.svg" alt="">
</div>
<div class="self-care">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Self Care
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
0hrs
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 1hr
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
2hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 2hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
7hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 11hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
</div>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>.
</div>
</body>
</html>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap");
:root {
/*## Colors*/
/*### Primary*/
--Blue: hsl(246, 80%, 60%);
--Light-red-1: hsl(15, 100%, 70%);
/*(work)*/
--Soft-blue: hsl(195, 74%, 62%);
/*(play)*/
--Light-red: hsl(348, 100%, 68%);
/*(study)*/
--Lime-green: hsl(145, 58%, 55%);
/*(exercise)*/
--Violet: hsl(264, 64%, 52%);
/*(social)*/
--Soft-orange: hsl(43, 84%, 65%);
/*(self care)*/
/*### Neutral*/
--Very-dark-blue: hsl(226, 43%, 10%);
--Dark-blue: hsl(235, 46%, 20%);
--Desaturated-blue: hsl(235, 45%, 61%);
--Pale-Blue: hsl(236, 100%, 87%);
}
body {
font-family: "Rubik", sans-serif;
}
body .container {
background: red;
width: 80%;
height: 60%;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(4, 1fr);
gap: 10px;
grid-template-areas: "report work play study" "report exercise social selfcare";
}
body .container .report {
grid-area: report;
background-color: violet;
height: 56.5%;
}
body .container .work-container {
grid-area: work;
width: 100%;
height: 50%;
background-color: violet;
}
body .container .study-container {
grid-area: study;
}
body .container .exercise-container {
grid-area: exercise;
}
body .container .social-container {
grid-area: social;
}
body .container .selfcare-container {
grid-area: selfcare;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="/css/styles.css">
<link rel="stylesheet" href="/css/stylesDesk.css">
<link rel="stylesheet" href="normalize.css">
<script src="https://kit.fontawesome.com/7461cf9184.js" crossorigin="anonymous"></script>
<title>Frontend Mentor | Time tracking dashboard</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
<div class="container">
<!-- Report info container -->
<div class="report">
<div class="info">
<img src="images/image-jeremy.png" alt="">
<div class="person-info">
<h2 class="title">
Report for
</h2>
<h3 class="name">
Jeremy Robson
</h3>
</div>
</div>
<div class="footer">
<p>Daily</p>
<p>Weekly</p>
<p>Monthly</p>
</div>
</div>
<!-- Work category container -->
<div class="work-container">
<div class="img">
<img src="images/icon-work.svg" alt="">
</div>
<div class="work">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Work
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
5hrs
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 7hrs
<!-- daily -->
</p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
32hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 36hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
103hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 128hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Play -->
<div class="play-container">
<div class="img">
<img src="images/icon-play.svg" alt="">
</div>
<div class="play">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Play
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
1hr
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 2hrs
<!-- daily -->
</p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
10hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 8hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
23hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 29hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Study -->
<div class="study-container">
<div class="img">
<img src="images/icon-study.svg" alt="">
</div>
<div class="study">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Study
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
0hrs
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 1hr
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
4hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 7hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
13hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 19hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Exercise -->
<div class="exercise-container">
<div class="img">
<img src="images/icon-exercise.svg" alt="">
</div>
<div class="exercise">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Exercise
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
1hr
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 1hr
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
4hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 5hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
11hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 18hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Social -->
<div class="social-container">
<div class="img">
<img src="images/icon-social.svg" alt="">
</div>
<div class="social">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Social
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
1hr
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 3hrs
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
5hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 10hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
21hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 23hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Self-care -->
<div class="self-care-container">
<div class="img">
<img src="images/icon-self-care.svg" alt="">
</div>
<div class="self-care">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Self Care
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
0hrs
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 1hr
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
2hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 2hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
7hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 11hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
</div>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>.
</div>
</body>
</html>so I am trying to make a grid with 2 rows and 4 columns, but when I do each column of the first row covers even more of the height of my 'grid container' and the second one is created below as the container was the double of height. So I wonder what is wrong with my code. If you could help me I will very much appreciate. Thank you.
Here I have the .scss file:
body {
font-family: 'Rubik', sans-serif;
.container {
background: red;
width: 80%;
height: 60%;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
//Grid
display: grid;
grid-template-rows: repeat(2,1fr);
grid-template-columns: repeat(4,1fr);
gap: 10px;
grid-template-areas:
"report work play study"
"report exercise social selfcare";
report{
grid-area:report;
}
work-container{
grid-area:work;
}
play-container{
grid-area:play;
}
study-container{
grid-area:study;
}
exercise-container{
grid-area:exercise;
}
social-container{
grid-area:social;
}
selfcare-container{
grid-area:selfcare;
}
}
Upvotes: 1
Views: 283
Answers (2)
Katheer
Reputation: 343
I hope the following answers will help you
- I have worked only on your CSS code, I didn't change your html structure.
- Better to you ideal height for .container element.
Target content overflow for each grid (each .container > div elements)
Added following additional CSS code in to your style
body .container > div {
overflow-y: auto;
}
Please check the following code snippet
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap");
:root {
/*## Colors*/
/*### Primary*/
--Blue: hsl(246, 80%, 60%);
--Light-red-1: hsl(15, 100%, 70%);
/*(work)*/
--Soft-blue: hsl(195, 74%, 62%);
/*(play)*/
--Light-red: hsl(348, 100%, 68%);
/*(study)*/
--Lime-green: hsl(145, 58%, 55%);
/*(exercise)*/
--Violet: hsl(264, 64%, 52%);
/*(social)*/
--Soft-orange: hsl(43, 84%, 65%);
/*(self care)*/
/*### Neutral*/
--Very-dark-blue: hsl(226, 43%, 10%);
--Dark-blue: hsl(235, 46%, 20%);
--Desaturated-blue: hsl(235, 45%, 61%);
--Pale-Blue: hsl(236, 100%, 87%);
}
body {
font-family: "Rubik", sans-serif;
}
body .container {
background: red;
width: 80%;
height: 60%;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(4, 1fr);
gap: 10px;
grid-template-areas: "report work play study" "report exercise social selfcare";
}
body .container > div {
overflow-y: auto;
}
body .container .report {
grid-area: report;
background-color: violet;
height: 56.5%;
}
body .container .work-container {
grid-area: work;
width: 100%;
height: 50%;
background-color: violet;
}
body .container .study-container {
grid-area: study;
}
body .container .exercise-container {
grid-area: exercise;
}
body .container .social-container {
grid-area: social;
}
body .container .selfcare-container {
grid-area: selfcare;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="/css/styles.css">
<link rel="stylesheet" href="/css/stylesDesk.css">
<link rel="stylesheet" href="normalize.css">
<script src="https://kit.fontawesome.com/7461cf9184.js" crossorigin="anonymous"></script>
<title>Frontend Mentor | Time tracking dashboard</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
<div class="container">
<!-- Report info container -->
<div class="report">
<div class="info">
<img src="images/image-jeremy.png" alt="">
<div class="person-info">
<h2 class="title">
Report for
</h2>
<h3 class="name">
Jeremy Robson
</h3>
</div>
</div>
<div class="footer">
<p>Daily</p>
<p>Weekly</p>
<p>Monthly</p>
</div>
</div>
<!-- Work category container -->
<div class="work-container">
<div class="img">
<img src="images/icon-work.svg" alt="">
</div>
<div class="work">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Work
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
5hrs
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 7hrs
<!-- daily -->
</p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
32hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 36hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
103hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 128hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Play -->
<div class="play-container">
<div class="img">
<img src="images/icon-play.svg" alt="">
</div>
<div class="play">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Play
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
1hr
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 2hrs
<!-- daily -->
</p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
10hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 8hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
23hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 29hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Study -->
<div class="study-container">
<div class="img">
<img src="images/icon-study.svg" alt="">
</div>
<div class="study">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Study
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
0hrs
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 1hr
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
4hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 7hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
13hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 19hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Exercise -->
<div class="exercise-container">
<div class="img">
<img src="images/icon-exercise.svg" alt="">
</div>
<div class="exercise">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Exercise
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
1hr
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 1hr
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
4hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 5hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
11hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 18hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Social -->
<div class="social-container">
<div class="img">
<img src="images/icon-social.svg" alt="">
</div>
<div class="social">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Social
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
1hr
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 3hrs
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
5hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 10hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
21hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 23hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Self-care -->
<div class="self-care-container">
<div class="img">
<img src="images/icon-self-care.svg" alt="">
</div>
<div class="self-care">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Self Care
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
0hrs
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 1hr
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
2hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 2hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
7hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 11hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
</div>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>.
</div>
</body>
</html>Target content overflow for grid-container (.container element)
Added following additional CSS code in to your style
body .container {
overflow-y: auto;
}
Please check the following code snippet
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap");
:root {
/*## Colors*/
/*### Primary*/
--Blue: hsl(246, 80%, 60%);
--Light-red-1: hsl(15, 100%, 70%);
/*(work)*/
--Soft-blue: hsl(195, 74%, 62%);
/*(play)*/
--Light-red: hsl(348, 100%, 68%);
/*(study)*/
--Lime-green: hsl(145, 58%, 55%);
/*(exercise)*/
--Violet: hsl(264, 64%, 52%);
/*(social)*/
--Soft-orange: hsl(43, 84%, 65%);
/*(self care)*/
/*### Neutral*/
--Very-dark-blue: hsl(226, 43%, 10%);
--Dark-blue: hsl(235, 46%, 20%);
--Desaturated-blue: hsl(235, 45%, 61%);
--Pale-Blue: hsl(236, 100%, 87%);
}
body {
font-family: "Rubik", sans-serif;
}
body .container {
background: red;
width: 80%;
height: 60%;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(4, 1fr);
gap: 10px;
grid-template-areas: "report work play study" "report exercise social selfcare";
overflow-y: auto;
}
body .container .report {
grid-area: report;
background-color: violet;
height: 56.5%;
}
body .container .work-container {
grid-area: work;
width: 100%;
height: 50%;
background-color: violet;
}
body .container .study-container {
grid-area: study;
}
body .container .exercise-container {
grid-area: exercise;
}
body .container .social-container {
grid-area: social;
}
body .container .selfcare-container {
grid-area: selfcare;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="/css/styles.css">
<link rel="stylesheet" href="/css/stylesDesk.css">
<link rel="stylesheet" href="normalize.css">
<script src="https://kit.fontawesome.com/7461cf9184.js" crossorigin="anonymous"></script>
<title>Frontend Mentor | Time tracking dashboard</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
<div class="container">
<!-- Report info container -->
<div class="report">
<div class="info">
<img src="images/image-jeremy.png" alt="">
<div class="person-info">
<h2 class="title">
Report for
</h2>
<h3 class="name">
Jeremy Robson
</h3>
</div>
</div>
<div class="footer">
<p>Daily</p>
<p>Weekly</p>
<p>Monthly</p>
</div>
</div>
<!-- Work category container -->
<div class="work-container">
<div class="img">
<img src="images/icon-work.svg" alt="">
</div>
<div class="work">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Work
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
5hrs
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 7hrs
<!-- daily -->
</p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
32hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 36hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
103hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 128hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Play -->
<div class="play-container">
<div class="img">
<img src="images/icon-play.svg" alt="">
</div>
<div class="play">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Play
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
1hr
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 2hrs
<!-- daily -->
</p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
10hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 8hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
23hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 29hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Study -->
<div class="study-container">
<div class="img">
<img src="images/icon-study.svg" alt="">
</div>
<div class="study">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Study
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
0hrs
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 1hr
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
4hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 7hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
13hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 19hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Exercise -->
<div class="exercise-container">
<div class="img">
<img src="images/icon-exercise.svg" alt="">
</div>
<div class="exercise">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Exercise
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
1hr
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 1hr
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
4hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 5hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
11hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 18hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Social -->
<div class="social-container">
<div class="img">
<img src="images/icon-social.svg" alt="">
</div>
<div class="social">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Social
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
1hr
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 3hrs
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
5hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 10hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
21hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 23hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Self-care -->
<div class="self-care-container">
<div class="img">
<img src="images/icon-self-care.svg" alt="">
</div>
<div class="self-care">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Self Care
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
0hrs
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 1hr
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
2hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 2hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
7hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 11hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
</div>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>.
</div>
</body>
</html>Upvotes: 2
A Haworth
Reputation: 36664
As the content is very much longer than the available height (at least on the max viewport I was able to have) then you will have to make it scroll if it is to be contained within the container element. ie:
.container > div { overflow: scroll; }
otherwise the content will push the areas down to make sure the content fits in.
The container really doesn't have much height so there will be a lot of scrolling which doesn't look great, and will it be difficult for the user to understand that they have to scroll through each one to see what it says?
Personally I would recomment scrapping the very constrained container size and letting the content decide the height of the grid areas so the user has at most one scrolling bar to cope with - but of course I don't know exactly your use case or who the users will be.
Here's the snippet with the scrolling included so your requirement to fit everything into the container as specified is met:
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap");
:root {
/*## Colors*/
/*### Primary*/
--Blue: hsl(246, 80%, 60%);
--Light-red-1: hsl(15, 100%, 70%);
/*(work)*/
--Soft-blue: hsl(195, 74%, 62%);
/*(play)*/
--Light-red: hsl(348, 100%, 68%);
/*(study)*/
--Lime-green: hsl(145, 58%, 55%);
/*(exercise)*/
--Violet: hsl(264, 64%, 52%);
/*(social)*/
--Soft-orange: hsl(43, 84%, 65%);
/*(self care)*/
/*### Neutral*/
--Very-dark-blue: hsl(226, 43%, 10%);
--Dark-blue: hsl(235, 46%, 20%);
--Desaturated-blue: hsl(235, 45%, 61%);
--Pale-Blue: hsl(236, 100%, 87%);
}
body {
font-family: "Rubik", sans-serif;
}
body .container {
background: red;
width: 80%;
height: 60%;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(4, 1fr);
gap: 10px;
grid-template-areas: "report work play study" "report exercise social selfcare";
}
/* ADDED */
body .container>div {
overflow: scroll;
}
body .container .report {
grid-area: report;
background-color: violet;
height: 56.5%;
}
body .container .work-container {
grid-area: work;
width: 100%;
height: 50%;
background-color: violet;
}
body .container .study-container {
grid-area: study;
}
body .container .exercise-container {
grid-area: exercise;
}
body .container .social-container {
grid-area: social;
}
body .container .selfcare-container {
grid-area: selfcare;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="/css/styles.css">
<link rel="stylesheet" href="/css/stylesDesk.css">
<link rel="stylesheet" href="normalize.css">
<script src="https://kit.fontawesome.com/7461cf9184.js" crossorigin="anonymous"></script>
<title>Frontend Mentor | Time tracking dashboard</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
<div class="container">
<!-- Report info container -->
<div class="report">
<div class="info">
<img src="images/image-jeremy.png" alt="">
<div class="person-info">
<h2 class="title">
Report for
</h2>
<h3 class="name">
Jeremy Robson
</h3>
</div>
</div>
<div class="footer">
<p>Daily</p>
<p>Weekly</p>
<p>Monthly</p>
</div>
</div>
<!-- Work category container -->
<div class="work-container">
<div class="img">
<img src="images/icon-work.svg" alt="">
</div>
<div class="work">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Work
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
5hrs
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 7hrs
<!-- daily -->
</p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
32hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 36hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
103hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 128hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Play -->
<div class="play-container">
<div class="img">
<img src="images/icon-play.svg" alt="">
</div>
<div class="play">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Play
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
1hr
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 2hrs
<!-- daily -->
</p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
10hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 8hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
23hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 29hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Study -->
<div class="study-container">
<div class="img">
<img src="images/icon-study.svg" alt="">
</div>
<div class="study">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Study
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
0hrs
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 1hr
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
4hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 7hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
13hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 19hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Exercise -->
<div class="exercise-container">
<div class="img">
<img src="images/icon-exercise.svg" alt="">
</div>
<div class="exercise">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Exercise
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
1hr
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 1hr
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
4hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 5hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
11hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 18hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Social -->
<div class="social-container">
<div class="img">
<img src="images/icon-social.svg" alt="">
</div>
<div class="social">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Social
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
1hr
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 3hrs
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
5hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 10hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
21hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 23hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Self-care -->
<div class="self-care-container">
<div class="img">
<img src="images/icon-self-care.svg" alt="">
</div>
<div class="self-care">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Self Care
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
0hrs
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 1hr
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
2hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 2hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
7hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 11hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
</div>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Your Name Here</a>.
</div>
</body>
</html>Upvotes: 0
Related Questions
- How to make div height equal to width in CSS Grid
- CSS Grid auto height not working for specific grid area
- CSS Grid : row not taking full height space available
- Prevent rows from filling the height of the grid container
- Grid row height gets bigger than defined
- CSS grid does not fit its parent div's height
- how to set grid element height as the rest of space
- css grid layout - height of rows never works
- Can't get grid area to fill vertical space
- No height in grid layout containers