CSS 无论我做什么，网格布局都无法让布局按照我想要的方式运行

Question

大家好，我正在尝试做这个作业，其中一个要求是它在 CSS 中使用网格布局，所以我只是将页面的开头放在一起，试图让布局正常工作我想要它的方式和我的生活，我无法让这个页面按照我需要的方式运行，这让我感到困惑，我无法弄清楚我做错了什么或遗漏了什么。我看过很多关于如何使用网格的指南和网站，但我不确定我错过了什么。非常感谢任何帮助，这是我的代码。编辑我的目标布局是这样的。

HTML

<head>
<meta charset="UTF-8">
<title>Assignment 3</title>
<meta name="description" content="This is the assignment 3 web page showcasing what we have learned in COMP1223 the so far.">
<meta name="keywords" content="Assignment 3, HTML5, CSS, flexbox, grid, form, image mapping, position fixed, nav">
<meta name="author" content="Jessica">
<link href="grid.css" rel="stylesheet">
<link href="normalize.css" rel="stylesheet">
</head>

<body>


<div class="grid-container">
    <div class="grid-item">
        <aside class="hobbies">1</aside>
    </div>
    <div class="grid-item">
        <header class="intro">2</header>
    </div>
    <div class="grid-item">
        <section class="application">3</section>
    </div>
    <div class="grid-item">
        <section class="form_elements">4</section>
    </div>
    <div class="grid-item">
        <article class="tutorial">5</article>
    </div>
    <div class="grid-item">
        <footer class="image_mapping">6</footer>
    </div>
</div>

</body>

</html>

CSS

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: repeat(5 auto);
    background-color: #2196F3;
    padding: 10px;
    grid-template-areas: "hb int int" "hb app fe" "hb app fe" "tu tu tu" "im im im";
}

.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

.hobbies {
    grid-area: hb;
}

.intro {
    grid-area: int;
}

.application {
    grid-area: app;
}

.form_elements {
    grid-area: fe;
}

.tutorial {
    grid-area: tu;
}

.image_mapping {
    grid-area: im;
}

Answer 1

问题是您将网格区域分配给 'aside'、'header' 和东西，而您应该将相同的网格区域分配给 div'包含它们的 s。

一个提示，如果你打算使用 'aside' 之类的东西，你不应该把它们放在 div 中，因为 div 和 aside 做同样的事情，他们分组内容.

我会留下我将如何完成这项任务，所以也许它将来会对你有所帮助：

.grid-container {
  display: grid;
  grid-template-areas:
    "hb int int"
    "hb ma ma"
    "ar ar ar"
    "im im im";
  /*I give the rows and columns a size just for comfort, but you can use '1fr'*/
  grid-template-rows: repeat(5, 100px);
  grid-template-columns: repeat(3, 100px);
  background-color: #2196F3;
  padding: 10px;
}

.grid-item,  .grid-main-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 15px;
  font-size: 30px;
  text-align: center;
}

/*I use id's to be more specific in wich thing i want to assign wich grid-area*/

#hobbies {
  grid-area: hb;
}

#intro {
  grid-area: int;
}

#tutorial {
  grid-area: ar;
}

#image_mapping {
  grid-area: im;
}


/* main container to have that 2 section's inside another block*/
#main-container {
  grid-area: ma;
  display: grid;
  grid-template-areas:
    "app frm"
    "app frm";
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
    /*you can put padding: 0; so the main container is invisible*/
}

#application {
  grid-area: app;
}

#form_elements {
  grid-area: frm;
}

<div class="grid-container">

    <header class="grid-item" id="intro">2</header>

    <aside class="grid-item" id="hobbies">1</aside>

  <main class="grid-item" id="main-container">
    <section class="grid-main-item" id="application">3</section>

    <section class="grid-main-item" id="form_elements">4</section>

</main>
    <article class="grid-item" id="tutorial">5</article>
  

    <footer class="grid-item" id="image_mapping">6</footer>

</div>

Answer 2

这里还有一个实现，可能更容易理解

<!DOCTYPE html>
<html lang="en">
<head>
    <style>

        * {
            padding: 40px;
        }
        body {
            background-color: rgb(61, 61, 61);
        }
        .container{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 10px;
        }

        .container > div {
            border-style: solid;
        }

        .aside {
            grid-row: 1 / 3;
        }

        .header {
            grid-column: 2 / 4
        }

        .article, .section {
            grid-column: 1 / 4;
        }
    </style>


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="aside">aside</div>
        <div class="header">header</div>
        <div>section</div>
        <div>section</div>
        <div class="article">article </div>
        <div class="section">section</div>
    </div>
</body>
</html>

查看演示：https://codepen.io/anthony_718/pen/dyppJwd

理解资源CSS网格： https://scotch.io/tutorials/getting-started-with-css-grid-layout

CSS 无论我做什么，网格布局都无法让布局按照我想要的方式运行

CSS Grid layout can't get layout to behave the way I want no matter what I do

html

css

grid

grid-layout