我想通过命名网格区域来设计带有 css 网格的布局，但布局未按要求显示。我怎样才能实现？答案

【问题标题】：I want to design a layout with css grid by naming grid area but layout not shows as required . How can i achieve?我想通过命名网格区域来设计带有 css 网格的布局，但布局未按要求显示。我怎样才能实现？
【发布时间】：2022-08-13 20:34:38
【问题描述】：

我是 Web 开发的新手，学习使用 cssgrid 设计布局。

Codepen 链接Here

Layout image on this link

HTML 代码

    <head>
        <meta charset=\"UTF-8\" />
        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />
        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />
        <link rel=\"stylesheet\" href=\"style_1.css\" />
        <title>Document</title>
    </head>
    <body>
        <div class=\"container\">
            <div class=\"item nav\">nav</div>

            <div class=\"item cover\">cover</div>

            <div class=\"item sidebar\">sidebar</div>

            <div class=\"item content1\">content1</div>

            <div class=\"item content2\">main</div>

            <div class=\"item footer\">footer</div>
        </div>
    </body>
</html>

CSS代码


body {
    margin: 0px;
    padding: 0px;
}

.item {
    background-color: #1eaafc;
    background-image: linear-gradient(
        130deg,
        #6c52d9 0%,
        #1eaafc 85%,
        #3edfd7 100%
    );
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    color: #ffffff;
    border-radius: 4px;
    /* border: 6px solid #171717; */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
}

.nav {
    grid-area: nav;
}
.cover {
    grid-area: mycover;
}

.sidebar {
    grid-area: sidebar;
}

.content1 {
    grid-area: content1;
}

.content2 {
    grid-area: main;
}

.footer {
    grid-area: footer;
}

.container {
    border: 5px solid red;
    display: grid;
    width: 100%;
    height: 100vh;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 1fr 1fr 100px 80px;

    grid-template-areas:
        \"nav nav nav\"
        \"sidebar mycover mycover\"
        \"sidebar main content1\"
        /* \"main main main\" */
        \"footer footer footer\";
}

我想在页脚之前添加 1 行和 3 列，这个 CSS 代码负责布局

 grid-template-areas:
    \"nav nav nav\"
    \"sidebar mycover mycover\"
    \"sidebar main content1\"
    /* \"main main main\" */    // do\'t know why its not working
    \"footer footer footer\";

当第 4 行代码被注释时，布局加载很好，如 Layout image on this link 但是当我取消注释第 4 行代码 /* \"main main main\" */ 布局崩溃并且没有显示所以为什么 /* \"main main main\" */ 部分没有加载。

标签： css layout responsive-design css-grid

【解决方案1】：

每个grid area 必须是正方形或矩形，因此它必须覆盖相同的行数和相同的列数。我添加了一个content2 网格区域和一个lowercover 网格区域来尝试更清楚地展示这一点。

您的main 网格区域在第三行中已经有一列，因此无法在第四行中放置三个main 区域。

这是complete guide to CSS grid的链接

body {
  margin: 0px;
  padding: 0px;
}

.item {
  background-color: #1eaafc;
  background-image: linear-gradient( 130deg, #6c52d9 0%, #1eaafc 85%, #3edfd7 100%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  color: #ffffff;
  border-radius: 4px;
  border: 2px solid #171717;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

.nav {
  grid-area: nav;
}

.cover {
  grid-area: mycover;
}

.sidebar {
  grid-area: sidebar;
}

.lowercover {
  grid-area: lowercover;
}

.content1 {
  grid-area: content1;
}

.content2 {
  grid-area: content2;
}

.footer {
  grid-area: footer;
}

.main {
  grid-area: main;
}

.container {
  border: 5px solid red;
  display: grid;
  width: 100%;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 1fr 1fr 1fr 80px;
  grid-template-areas: 
    "nav nav nav"
    "sidebar mycover mycover" 
    "sidebar main content1" 
    "sidebar main content2"
    "lowercover lowercover content2"
    "footer footer footer";
}

<div class="container">
  <div class="item nav">nav</div>
  <div class="item cover">cover</div>
  <div class="item sidebar">sidebar</div>
  <div class="item lowercover">lower cover</div>
  <div class="item main">main</div>
  <div class="item content1">content1</div>
  <div class="item content2">content2</div>
  <div class="item footer">footer</div>
</div>

【讨论】：