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

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

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

我的桌面视图是我想要的，但是当它折叠到移动大小的视图（所有元素在不同的行中）时，我的leftPad和rightPad div会导致双grid-gap，如下所示：

double 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>
        <!-- Navigation -->
        Nav
      </nav>
      <header>
        Header
      </header>
      <div class="leftPad"></div>
      <aside class="leftSidebar">
        <!-- Sidebar / Ads -->
        Side bar
      </aside>
      <main>
        <!-- Main content -->
        Main content
      </main>
      <aside class="rightSidebar">
        <!-- Sidebar / Ads -->
        Side bar
      </aside>
      <div class="rightPad"></div>
      <footer>
        Footer
        <!-- Footer content -->
      </footer>
    </div>
>

对此有任何解决方法，或者我如何以不同方式构建此布局的建议？干杯!

html css html5 css3 css-grid
2个回答
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>
0
投票

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

我也会考虑在小屏幕上使用flexbox，因为你不会真正拥有一个网格，你的元素将简单地叠加在一起

.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;
}
<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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.