CSS 具有全浏览器宽度背景颜色的网格项？

Question

我试着跳转介绍CSS网格吧！但有一件事我不清楚。你将如何构建一个 master grid/layout，也许你的页眉、英雄和页脚背景颜色具有完整的浏览器宽度（如 Whosebug header/footer）？无需像今天使用 flexbox、floats & co 那样嵌套 div。这可能以一种干净的方式吗？我希望你能理解我努力工作的目的。我添加了一张图片，也许这样更清楚 ;)

好的，这是一个 fiddle：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Grid Layout Test</title>
</head>

<body>

  <div class="container">
    <div class="topbar">
      <div class="logo">LOGO</div>
      <ul class="menu">
        <li class="menu-item">Menu Item</li>
        <li class="menu-item">Menu Item #2</li>
        <li class="menu-item">Menu Item #3</li>
      </ul>
    </div>

    <div class="hero">
      <p class="hero-text">Hero Banner</p>
    </div>

    <div class="content">
      <h1 class="content-headline">Content</h1>
      <p class="content-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
        natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque
        eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
        arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
        Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,
        porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
        Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.
        Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus,
        sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit
        id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis
        ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales
        sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nun</p>
    </div>

    <div class="sidebar">
      <h2 class="sidebar-headline">Sidebar</h2>
    </div>

    <div class="footer">
      <p class="footer-text">Footer</p>
    </div>
  </div>

  <style>
    * {
      box-sizing: border-box
    }

    html,
    body {
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }

    .container {
      display: grid;
      margin: 0 auto;
      max-width: 1000px;
      grid-template-areas: "topbar topbar topbar" "hero hero hero" "content content sidebar" "footer footer footer";
    }

    .topbar {
      grid-area: topbar;
      display: grid;
      grid-template-columns: auto 1fr;
      background-color: darkolivegreen;
      color: white;
      padding: 20px 0;
    }

    .topbar ul {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      justify-content: flex-end;
    }

    .hero {
      grid-area: hero;
      background-color: lightcoral;
      min-height: 300px;
      display: grid;
      place-items: center center;
    }

    .sidebar {
      grid-area: sidebar;
      width: 200px;
      background-color: lightgray;
    }

    .footer {
      grid-area: footer;
      background-color: darkgoldenrod;
    }
  </style>

</body>

</html>

但现在我希望顶部栏、英雄和页脚的背景颜色是完整的浏览器大小，而不需要在我的区域周围使用经典的嵌套 div。如果我必须这样做，我看不出 css 网格对整体布局有任何好处。

Answer 1

您可以做的是创建一个带有容器的特定 HTML 布局，该容器将强制某些元素保持在设定的宽度内。容器外的任何内容都将显示为全宽。

现场直播JSFiddle example。

HTML

<div class="wrapper">
    <div class="section">
        <div class="container">
            <!-- Set width content -->
        </div>
    </div>
    <div class="section">
        <div class="container">
            <!-- Set width content -->
        </div>
    </div>
    <div class="section">
        <!-- Full width content -->
    </div>
</div>

CSS

.wrapper {
  width: 100%;
  height: 100%;
}

.container {
  width: 80%;
  margin: 0 auto;
}

CSS 具有全浏览器宽度背景颜色的网格项？

CSS Grid Item with full browser width background color?

css

layout

grid

css-grid