带排水沟的 CSS 网格布局答案

【问题标题】：CSS Grid layout with gutters带排水沟的 CSS 网格布局
【发布时间】：2020-09-21 22:19:57
【问题描述】：

我需要这样的布局：

这是我的尝试：

:root {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.grid-container {
  display: grid;
  grid-template-columns:
    [full-start] minmax(0, 1fr)
    [main-start] minmax(0, 55.625em) [main-end]
    minmax(0, 1fr) [full-end];
}

.grid-container > * {
  grid-column: full-start / full-end;
}

.header {
  background: #0e9daf;
}

.main {
  background: #9E9E9E;
  grid-column: main-start;
}

.sidebar {
  background: #dd9f32;
}

.footer {
  background: #9b51e0;
}

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="gridlayout.css">
  <title>Document</title>
</head>
<body>
  <div class="grid-container">
    <header class="header">
      Header
    </header>

    <main class="main">
      Main
    </main>

    <aside class="sidebar">
      Sidebar
    </aside>

    <footer class="footer">
      Footer
    </footer>
  </div>
</body>
</html>

如果屏幕更宽，比方说 1080p 屏幕，主要内容在左右两侧都有装订线，但页眉和页脚延伸了整页。

考虑这样的事情，但我正在通过网格实现它：

  .main {
     max-width: 800px;
     margin: 0 auto;
  }

在较大的显示器上，我想将主要区域分成两部分，我需要一个内容区域（所有博客帖子的列表）和右侧的侧边栏，其中包含“最近的帖子”、“搜索栏”等小部件“，等等）。我需要在内容和侧边栏之间留一些空隙（不多）。

在小屏幕上，我想要标题在前，博客文章在标题下方，小部件在博客文章下方，页脚在最后。

我什至不确定我是否以正确的方式处理这个问题。我很想听听你的意见。谢谢。

【问题讨论】：

您的问题到底是什么？有没有你想要的东西不工作？

标签： html css

【解决方案1】：

使用grid-template-areas，可以轻松实现想要的布局

html,
body {
  height: 100%;
  margin: 0;
}

.grid-container {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 15%;
  grid-template-rows: 1fr 10fr 1fr;
  justify-content: center;
  grid-column-gap: 2%;
  grid-template-areas: "h h h h" "m m m s" "f f f f";
}

.header {
  background: #0e9daf;
  grid-area: h;
}

.main {
  background: #9E9E9E;
  grid-area: m;
}

.sidebar {
  background: #dd9f32;
  grid-area: s;
}

.footer {
  background: #9b51e0;
  grid-area: f;
}

@media (max-width: 480px) {
  .grid-container {
    grid-template-areas: "h h h h" "m m m m" "s s s s" "f f f f";
  }
}

@media (min-width: 1080px) {
  .grid-container {
    grid-template-columns: 10% 62% 12% 10%;
    grid-template-areas: "h h h h" ". m s ." "f f f f";
  }
}

<div class="grid-container">
  <header class="header">
    Header
  </header>

  <main class="main">
    Main
  </main>

  <aside class="sidebar">
    Sidebar
  </aside>

  <footer class="footer">
    Footer
  </footer>
</div>

【讨论】：

谢谢你这就是我要找的，除了我需要页眉和页脚完全伸展

【解决方案2】：

您可以使用模板区域 (https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas) 轻松实现这一目标。如果您希望布局以不同的分辨率更改，只需添加@media 查询并定义一个新的网格模板区域。

（我将 minmax(0, 55.625em) 更改为 minmax(0, 400px) 以获得下面的视觉效果）

.grid-container {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns:  1fr minmax(0, 300px) minmax(0, 100px) 1fr;
  grid-column-gap:10px;
  grid-template-areas: 
     "header header header header"
     ". main sidebar ."
     "footer footer footer footer"
  ;
}

.header {
  grid-area: header;
  background: #0e9daf;
}

.main {
  grid-area: main;
  background: #9E9E9E;
  grid-column: main-start;
}

.sidebar {
  grid-area: sidebar;
  background: #dd9f32;
}

.footer {
  grid-area: footer;
  background: #9b51e0;
}

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="grid-container">
    <header class="header">
      Header
    </header>

    <main class="main">
      Main
    </main>

    <aside class="sidebar">
      Sidebar
    </aside>

    <footer class="footer">
      Footer
    </footer>
  </div>
</body>
</html>

【讨论】：

我知道模板区域。我在圣杯布局中使用它们，但在那个布局中，我把所有东西都展开了，页眉、侧边栏、内容和页脚。我想实现的目标是 Rachel Andrew 在这里写的 rachelandrew.co.uk/archives/2017/06/01/… 但是我需要另外将中心内容分成两部分，一个主要区域和一个侧边栏。在您的示例中，主栏和侧边栏位于彼此之上。
更新了答案 - 不是 100% 确定你在追求什么。
谢谢。您的代码效果很好。我只需要主边栏和侧边栏之间有一些间隙，但我认为可以用“grid-gap: 10px”添加对吗？在移动设备上，我将添加一个媒体查询以将这些块相互移动。
是的，grid-column-gap（添加到答案中）

【解决方案3】：

您可以将中间列拆分为 4 列而不是 3 列，并且您考虑将媒体查询切换回 3 列：

:root {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.grid-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 40.625em) minmax(0, 15em) minmax(0, 1fr);
}

.grid-container>* {
  grid-column: 1/-1;
}

.header {
  background: #0e9daf;
}

.main {
  background: #9E9E9E;
  grid-column: 2;
  margin-right: 5px;
}

.sidebar {
  background: #dd9f32;
  grid-column: 3;
  margin-left: 5px;
}

.footer {
  background: #9b51e0;
}

@media all and (max-width:800px) {
  .grid-container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 55.625em) minmax(0, 1fr);
  }
  .main,
  .sidebar {
    grid-column: 2;
    margin: 0;
  }
}

<div class="grid-container">
  <header class="header">
    Header
  </header>

  <main class="main">
    Main
  </main>

  <aside class="sidebar">
    Sidebar
  </aside>

  <footer class="footer">
    Footer
  </footer>
</div>

【讨论】：