html - 在移动 View 中折叠网格项时避免双重网格间隙-6ren

html - 在移动 View 中折叠网格项时避免双重网格间隙

转载作者：行者123 更新时间：2023-11-28 14:21:03

24

4

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

我的桌面 View 是我想要的，但是当它折叠成移动大小的 View 时(所有元素都在单独的行中)，我的 leftPad 和 rightPad div 导致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>
>

是否有解决此问题的方法，或关于如何以不同方式构建此布局的建议？干杯!

最佳答案

问题是您的 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";

注意上面定义中的点。在移动 View 中，忽略它们即可。

However you can leave grid cells empty with this method of layout. To leave a cell empty use the full stop character, '.'.

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>

关于html - 在移动 View 中折叠网格项时避免双重网格间隙，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55193903/

24

4

0

文章推荐： javascript - 不稳定的 jQuery UI 拖动时可排序

文章推荐： javascript - 在 asp.net 中自动发布后如何重新加载脚本？

文章推荐： php - 在 php 中对列表进行分页

文章推荐： javascript - 通过 Javascript 使 CSS 隐藏的区域淡入

拆分音频后级联音频中的 FFmpeg 间隙
不确定是间隙还是音频样本未对齐，但是当我将音频文件一分为二时，如下所示: ffmpeg -ss 0 -t 00:00:15.00 -i song.mp3 seg1.mp3 和 ffmpeg -ss 0
cocoa - NSDrawNinePartImage 间隙
我正在使用 NSDrawNinePartImage 绘制自定义按钮/文本字段。我在代码中将图像分割成九个部分，并使用 NSDrawNinePartImage 将其绘制到一个矩形中。不幸的是，我在绘图
android - ProgressBar 间隙
Check this image for the progressbar 知道如何消除 ProgressBar 下的那个小间隙吗？我怎样才能做到没有差距？应该通过 MainActivity 中的 ja
html - 整个网页左侧不需要的边距/间隙
刚开始制作网站时，整个左侧都有几个像素的边距，但我不明白为什么。 http://jsbin.com/elufob/1/ 任何建议将不胜感激 CSS html{ min-width: 1
标题和静态图像之间的 HTML 间隙
我一直在尝试在我的网站上使用静态图像，但页眉和图像之间存在很大差距，我尝试在 Photoshop 和 HTML 中删除填充并更改图像高度。这是我的问题的 fiddle https://jsfiddle
css - 文档顶部的小边距/间隙
我前一段时间遇到过这个问题，忘记了解决方案是什么。我的文档顶部有一个小间隙，大概 5/10 像素？我想你会知道我在说什么，我该如何摆脱它？谢谢最佳答案在您的 CSS 文件中添加: html,
html - 整个网页左侧不需要的边距/间隙
刚开始制作网站时，整个左侧都有几个像素的边距，但我不明白为什么。 http://jsbin.com/elufob/1/ 任何建议将不胜感激 CSS html{ min-width: 1
reactjs - 展开时如何消除 Accordion 间隙？
我正在尝试使用 Accordion MUI 组件在展开模式下不会移动，也不会对某些元素应用顶部和底部边距。示例如下，但它不起作用，我的组件仍然太“跳跃”(扩展时它会增加宽度，并且添加了一些不可见的边
ios - 最后两个单元格之间奇怪的 UITableViewCell 间隙
我有一个自定义 UITableViewCell Card 样式的动态高度，它的空间在应用程序中是恒定的。我正在使用 Storyboard ，并且在 UINavigationBar 下方有 UITool
javascript - 在日期范围数组中查找 'holes'(间隙)
假设您有一组日期范围 var arr = [ { "from": 'unix 1st of august', "until": 'unix 5th of august' },
css - 径向渐变显示一些背线，间隙，空格或边距
我是radial-gradient的新手，我不知道这些多维数据集之间的背线或空格是什么？如何删除它们？ * {margin: 0; outline: 0; border: 0;} .round {
列表前后的 HTML 间隙 (
- css - Chrome 在呈现多个渐变时在中间留下空白/间隙
  我正在阅读 Lea Verou 的《CSS secret 》一书。有一个圆 Angular 径向多重渐变的例子: http://dabblet.com/gist/24484257bc6cf7076a
- html - 修复标题标签前奇怪的 2px 间隙
  我一直在为一个客户做一个元素，一切都很顺利，直到我注意到我的 h1/h2/h3(任何标题标签)已经向右移动了 2/3 像素。他们可能一直都在这样做，但我只是刚刚注意到。当您在 devtools 中突出
- div 内链接之间的 Css 间隙
  这里是 CSS 新手。奇怪的事情发生了，链接之间有间隙，我不知道为什么。我正在使用 html html5 样板 css 进行重置。 HTML代码: Link 1 Link
- html - H1 在标题和页面顶部之间留出空间/间隙
  这个问题在这里已经有了答案: margin on h1 element inside a div (3 个答案) 关闭 6 年前。我有一个问题，我的 h1 标签与我的页面顶部分开 - 像这样:en
- html - 下划线文本 CSS 间隙
  我希望我的文本在事件时带有下划线，但当我这样做时它看起来像这样: 我只希望文本有下划线，如果我使用 text-decoration:underline 它会在单词下划线，但我不知道如何在文本和下划线之
- html - 无法删除表格内两个图像之间的 5px 间隙
  我似乎无法将这两张图片放在一起。它们都在 HTML 表格中自己的行中(我正在制作一封 html 电子邮件)，但我似乎无法删除它们之间的 5px。这是我的代码它也在 jsfi
- Android CardView cardCornerRadius 间隙
  我正在尝试在我的项目中使用新的 CardView UI 小部件，但在某些运行 android 2.3 的设备上，CardView 角之间存在间隙(见下文)。这是在我的 xml 文件中:
- 填充具有公共(public)边框的形状后的Javascript Canvas 间隙
  我想了解并学习当我使用共享边框填充两个形状/路径时遇到的问题的解决方案，即在为所有形状调用填充后，仍然有一个微小的间隙存在于他们之间。该代码片段展示了绘制所涉及的形状/路径的代码: ctx.begi

首页

博学

6Ren·AI

商城

html - 在移动 View 中折叠网格项时避免双重网格间隙