[CSS网格布局，其列用作压痕边界无法按预期工作[重复]

Question

我正在为我的网站创建一个基本的CSS网格。现在，它有3行。一个用于徽标和导航，另一个用于横幅图像，第三个用于文本内容。

网格总共有6列，其中两列是设置的大小（25px），我将它们用作边框以缩进某些CSS网格行中包含的内容。如您在所附图像中所看到的，顶部导航（徽标+导航）按预期显示，并使用“左”和“右” CSS网格边框列稍微缩进。

此后，横幅图像按预期显示在新的CSS网格行上，并占据了所有6列（不使用左侧或右侧边框列）。

最后，其中包含文本的第三行应跨越4列，并显示左右css网格列。那就是一切变成混乱的地方。

相反，第三行将横幅覆盖在第二行上，不遵循使用左右网格列进行缩进的规则，导航行（徽标+导航）消失了。

我在这里提供代码，还包括一个Codepen以及说明问题的图片。

我相信问题与左右边框列有关，因为如果我将网格行分布在所有6列上，则文本将正确显示。

您能帮我弄清楚我做错了什么吗？也许有一种更好的方法来实现没有多余列的边框？

谢谢！

Codepen

[https://codepen.io/BillRaymond/pen/vYOJEZY][1]

HTML

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="grid.css">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="logo"><img src="https://via.placeholder.com/250x35?text=Logo" alt="" class="logo-image"></div>
    <div class="nav">HOME ABOUT BLOG LINKEDIN TWITTER </div>
    <div class="banner"><img src="https://via.placeholder.com/1366x500?text=banner" alt="" class="banner-image"></div>
    <div class="title">This text should be below the banner with a 'left' and 'right' border. The logo and navigation
      bar do not show.</div>
  </div>
</body>

</html>

CSS / SCSS

// full size grid
.container {
    margin: auto;
    display: grid;
    max-width: 1366px;
        grid-template-areas:
        "left   logo   nav    nav    nav    right"
        "banner banner banner banner banner banner"
        "left   title  title  title  title  right";
       // ^^ comment the above line and add a semi-colon to the line above that. The logo and nav will appear again.
    grid-template-columns: 25px auto auto auto auto 25px;
    grid-template-rows: auto auto auto;
} // end full-size container

.left {
    display: grid;
    grid-area: left;
}

.right {
    display: grid;
    grid-area: right;
}

.logo {
    display: grid;
    grid-area: logo;
}

.nav {
    display: grid;
    grid-area: nav;
    justify-content: end;
}

.banner {
    display: grid;
    grid-area: banner;
}

.title {
    display: title;
    grid-area: title;
}

Answer 1

网格区域必须为矩形。您不能像您想要的那样spread网格区域。而是重命名区域left和right（并将它们正确分配给它们各自的CSS声明）：

grid-template-areas:
    "leftTop      logo   nav    nav    nav    rightTop"
    "banner       banner banner banner banner banner"
    "leftBottom   title  title  title  title  rightBottom";

[CSS网格布局，其列用作压痕边界无法按预期工作[重复]

问题描述投票：0回答：1

Codepen

HTML

CSS / SCSS

1个回答

最新问题

[CSS网格布局，其列用作压痕边界无法按预期工作[重复]

问题描述 投票：0回答：1

Codepen

HTML

CSS / SCSS

1个回答

最新问题

问题描述投票：0回答：1