Question

我正在使用CSS网格创建网站布局，并且几乎完全按照我的意愿获得了布局，但是我遇到了一个问题：

我的桌面视图是我想要的，但是当它折叠为移动大小的视图（所有元素在单独的行中）时，我的leftPad和rightPad div导致 double < / em> grid-gap，如下所示：

代码可在此处查看：https://codepen.io/nickmask/pen/BbxNoE

.container { display: grid; grid-template-areas: "nav nav nav nav nav" "header header header header header" "leftPad leftSidebar content rightSidebar rightPad" "footer footer footer footer footer"; grid-template-columns: auto 200px minmax(auto, 600px) 200px auto; grid-template-rows: auto auto 1fr auto; grid-gap: 10px; height: 100vh; } body { margin: 0; } @media (max-width: 768px) { .container { grid-template-areas: "nav" "header" "leftPad" "leftSidebar" "content" "rightSidebar" "rightPad" "footer"; grid-template-columns: 1fr; grid-template-rows: auto /* Nav */ auto /* Header */ auto /* Left Pad */ minmax(75px, auto) /* Left Sidebar */ 1fr /* Content */ minmax(75px, auto) /* Right Sidebar */ auto /* Right Pad */ auto; /* Footer */ } nav, aside { margin: 0; } } header { grid-area: header; background-color: aqua; } nav { grid-area: nav; background-color: lightblue; } main { grid-area: content; } .leftSidebar { background-color: aliceblue; grid-area: leftSidebar; } .rightSidebar { background-color: aliceblue; grid-area: rightSidebar; } footer { grid-area: footer; height: 100px; background-color: lightcoral; }

<div class="container"> <nav>  Nav </nav> <header> Header </header> <div class="leftPad"></div> <aside class="leftSidebar">  Side bar </aside> <main>  Main content </main> <aside class="rightSidebar">  Side bar </aside> <div class="rightPad"></div> <footer> Footer  </footer> </div> >

是否有其他解决方法，或者关于如何以其他方式构建此布局的建议？干杯！

Answer 1

问题出在您的leftPad和rightPad-您可以删除它们，然后更改grid-template-areas：

grid-template-areas:
    "nav nav nav nav nav"
    "header header header header header"
    ". leftSidebar content rightSidebar ."
    "footer footer footer footer footer";

请注意上面定义中的点。在移动视图中，只需将它们忽略即可。

但是您可以将网格单元格留空   布局方法。要使单元格为空，请使用句号，   “。”。

MDN

请参见下面的演示

.container {
  display: grid;

  grid-template-areas:
    "nav nav nav nav nav"
    "header header header header header"
    ". leftSidebar content rightSidebar ."
    "footer footer footer footer footer"; /* CHANGED */

  grid-template-columns: auto 200px minmax(auto, 600px) 200px auto;
  grid-template-rows: auto auto 1fr auto;
  grid-gap: 10px;

  height: 100vh;
}

body {
  margin: 0;
}

@media (max-width: 768px) {
  .container {
    grid-template-areas:
      "nav"
      "header"
      "leftSidebar"
      "content"
      "rightSidebar"
      "footer"; /* CHANGED */

    grid-template-columns: 1fr;
    grid-template-rows:
      auto /* Nav */
      auto /* Header */
      minmax(75px, auto) /* Left Sidebar */
      1fr /* Content */
      minmax(75px, auto) /* Right Sidebar */
      auto; /* Footer */
  } /* CHANGED */

  nav,
  aside {
    margin: 0;
  }
}

header {
  grid-area: header;
  background-color: aqua;
}

nav {
  grid-area: nav;
  background-color: lightblue;
}

main {
  grid-area: content;
}

.leftSidebar {
  background-color: aliceblue;
  grid-area: leftSidebar;
}

.rightSidebar {
  background-color: aliceblue;
  grid-area: rightSidebar;
}

footer {
  grid-area: footer;
  height: 100px;
  background-color: lightcoral;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
  </head>
  <body>
    <div class="container">
      <nav>
        <!-- Navigation -->
        Nav
      </nav>
      <header>
        Header
      </header>
      
      <aside class="leftSidebar">
        <!-- Sidebar / Ads -->
        Side bar
      </aside>
      <main>
        <!-- Main content -->
        Main content
      </main>
      <aside class="rightSidebar">
        <!-- Sidebar / Ads -->
        Side bar
      </aside>
      
      <footer>
        Footer
        <!-- Footer content -->
      </footer>
    </div>
  </body>
</html>

Answer 2

我将通过删除不需要的元素并减少属性数量来优化网格定义，如下所示。

我也考虑在小屏幕上使用flexbox，因为您实际上并没有网格，并且您的元素只会彼此叠放

ServerListener

.container {
  display: grid;
  grid-template-columns: auto 200px minmax(auto, 600px) 200px auto;
  grid-template-rows: auto auto 1fr auto;
  grid-gap: 10px;
  min-height: 100vh; /*better use min-height to avoid overflow on small screen */
}

@media (max-width: 768px) {
  .container {
    display: flex;
    flex-direction: column;
  }
  /*this will replace the gap*/
  .container>*:not(:last-child) {
    margin-bottom: 10px;
  }
}

header,
nav,
footer {
  grid-column: 1/-1;
  /*take whole line*/
}

main {
  grid-column: 3;
  flex-grow: 1; /*will replace 1fr on small screen*/
}

.leftSidebar,
.rightSidebar {
  min-height: 75px;
  background-color: aliceblue;
}

.leftSidebar {
  grid-column: 2;
}

.rightSidebar {
  grid-column: 4;
}

footer {
  height: 100px;
  background-color: lightcoral;
}

header {
  background-color: aqua;
}

nav {
  background-color: lightblue;
}

body {
  margin: 0;
}

在移动视图中折叠网格项时避免双重网格间隙

2 个答案: