带间距的 CSS 网格布局

Question

带间距的 CSS 网格布局

我需要这样的布局：

这是我的尝试：

: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;
}

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

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

想想这样的事情，但我是用网格实现的：

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

Run Code Online (Sandbox Code Playgroud)

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

在小屏幕上，我希望首先显示标题，然后是标题下方的博客文章，最后是博客文章下方的小部件，最后是页脚。

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

Answer 1

Tib*_*lit 3

您可以使用模板区域（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;
}

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，9 月前
查看次数：	3344 次
最近记录：	5 年，9 月前