Question

我正在尝试将CSS网格布局用作described here。

我的问题是，在成功编码两行网格布局后，我无法获得第三行的布局。第三行以某种方式掩盖了第二行。

以下是代码的基本结构，以便了解我正在尝试做什么。我的所有代码库都是here。

在查看已发布的页面时，很明显前两行的布局正确，但遗憾的是第三行不会遵循网格布局（并覆盖在第二行）。

有谁知道我如何正确布置第三排？

我的HTML结构：

    <body>

    <header class="hero">
    </header>

    <main role="main">

    <section class="tech">
    </section>

    <section class="afford">
        <h1>This heading should be in the next section</h1>
    </section>

    </main>

    </body>

CSS的结构：

body {
    font-family: 'Lato', sans-serif;
    width: 100%;
    margin: 0 auto;
    display: grid;
    margin: 0 auto;
    grid-template-columns: 10% auto auto 10%;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: "hero          hero          hero         hero"
                         "tech          tech          tech         tech"
                         "afford        afford        afford       afford"
                         ". .   .   ."
                         ". .   .   .";
    box-sizing: border-box;
    height: 100vh;
}

.hero {
    grid-area: hero;
    background-image: url('../images/people-working.jpg');
    width: 100%;
    height: 928px;
    background-size: cover;
    background-position: center;
}

.tech {
    grid-area: tech;
    width: 100%;
    height: 712px;
    position: absolute;
    text-align: center;
}

.afford {
    grid-area: afford;
    width: 100%;
    height: 832px;
    position: absolute;
    text-align: center;
}

Answer 1

如果删除该位置：绝对;然后堆叠标记。我删除了这个例子中的大部分代码，但我认为这是你在基本结构层面的目标：

http://codepen.io/stacy/pen/157042a40a8b4c23f1bad5c12719c8f5?editors=1100

body {
    font-family: 'Lato', sans-serif;
    height: 100vh;
    display: grid;
    // grid-template-columns: 1fr;
    // grid-template-rows: auto;
    grid-template-areas: "hero"
                         "tech"
                         "afford";
    margin: 0 auto;
    width: 100%;
 }

.hero {
    grid-area: hero;
}

.tech {
    grid-area: tech;
}

.afford {
    grid-area: afford;
}

如果您声明每个模板区域将填充的列数或声明grid-template-columns宽度，则您不会需要宽度。

请记住，如果您向主体添加网格，它将无法应用于每个网格区域内的元素。有一天希望我们会看到子网格规范生动，但在那之前，我们必须像我们的flexbox一样应用它。我注意到你宣布了4列，并且到目前为止每个网格区域划了4次，这就是我提出这个问题的原因。

希望这有帮助。

无法使用CSS网格布局正确布局行

1 个答案: