网格区域不适应容器高度
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>
所以我试图制作一个 2 行 4 列的网格，但是当我这样做时，第一行的每一列都覆盖了我 'grid container' 的更多高度
第二个是在下面创建的，因为容器是高度的两倍。所以我想知道我的代码有什么问题。如果你能帮助我，我将不胜感激。谢谢。
我这里有 .scss 文件：
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;
}
}
希望以下回答对您有所帮助
- 我只处理了您的 CSS 代码，我没有更改您的 html
结构。
- .container 元素的理想高度更好。
每个网格的目标内容溢出（每个 .container > div 个元素）
在您的样式中添加了以下额外的 CSS 代码
body .container > div {
overflow-y: auto;
}
请检查以下代码片段
@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>
网格容器（.container 元素）的目标内容溢出
在您的样式中添加了以下额外的 CSS 代码
body .container {
overflow-y: auto;
}
请检查以下代码片段
@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>
由于内容比可用高度长得多（至少在我能够拥有的最大视口上），因此如果要将其包含在容器元素中，则必须使其滚动。即：
.container > div { overflow: scroll; }
否则内容会将区域向下推以确保内容适合。
容器确实没有太多高度所以会有很多滚动看起来不太好，并且用户很难理解他们必须滚动每一个才能看到什么它说？
我个人建议取消非常受限的容器大小，让内容决定网格区域的高度，这样用户最多只有一个滚动条来应对——当然我不知道你的确切用途案例或用户是谁。
这是包含滚动的代码片段，因此满足您将所有内容都放入指定容器的要求：
@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>
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>
所以我试图制作一个 2 行 4 列的网格，但是当我这样做时，第一行的每一列都覆盖了我 'grid container' 的更多高度 第二个是在下面创建的，因为容器是高度的两倍。所以我想知道我的代码有什么问题。如果你能帮助我，我将不胜感激。谢谢。
我这里有 .scss 文件：
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;
}
}
希望以下回答对您有所帮助
- 我只处理了您的 CSS 代码，我没有更改您的 html 结构。
- .container 元素的理想高度更好。
每个网格的目标内容溢出（每个 .container > div 个元素）
在您的样式中添加了以下额外的 CSS 代码
body .container > div {
overflow-y: auto;
}
请检查以下代码片段
@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>
网格容器（.container 元素）的目标内容溢出
在您的样式中添加了以下额外的 CSS 代码
body .container {
overflow-y: auto;
}
请检查以下代码片段
@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>
由于内容比可用高度长得多（至少在我能够拥有的最大视口上），因此如果要将其包含在容器元素中，则必须使其滚动。即：
.container > div { overflow: scroll; }
否则内容会将区域向下推以确保内容适合。
容器确实没有太多高度所以会有很多滚动看起来不太好，并且用户很难理解他们必须滚动每一个才能看到什么它说？
我个人建议取消非常受限的容器大小，让内容决定网格区域的高度，这样用户最多只有一个滚动条来应对——当然我不知道你的确切用途案例或用户是谁。
这是包含滚动的代码片段，因此满足您将所有内容都放入指定容器的要求：
@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>