CSS 全宽 header/footer 和较窄 main/sidebar 的网格

Question

我有一个经典的站点设置，其中包含页眉、主要内容和侧边栏以及页脚。在更宽的屏幕上，我希望页眉和页脚是全宽的，而主栏和侧边栏的宽度是固定的，每个站点都有空白。当您使屏幕变窄时，空白会缩小（很像 StackExchange 中的这里）。一旦达到主+侧边栏宽度，它们就会缩小。在过去，我会在 main+sidebar 周围放一个包装器，应用 max-width:1200px; margin:0 auto; 就完成了。现在我试图用 grid 解决这个问题，但无济于事。这是代码：

<div id="totalcontent">
  <div id="header">content</div>
  <div id="main">content</div>
  <div id="sidebar">content</div>
  <div id="footer">content</div>
</div>

<style>
#totalcontent {
  grid-template-areas:
   'header header'
   'main sidebar'
   'footer footer';
  grid-template-columns: 66% auto;
  }
</style>

现在，我可以将 max-width:900px; float:right 放在 #main 上，将 max-width:300px; float:left; 放在 #sidebar 上，使它们更窄，但只有当 window 宽度1800px 这会导致内容整齐地居中，两边都有 300px 空格。一旦屏幕变窄，main+sidebar 就会向左转，因为在 1500px 宽度下，你需要 grid-template-columns: 70% auto; 才能在两边有 150px 空白。

我试过的

将其设为四列网格，在主栏和侧边栏的两边都有空块。用 grid-template-columns 尝试了各种方法来优先缩小空块。运气不好。
使用媒体查询调整grid-template-columns。这行得通，但在拖动 window 以调整其大小时使设计变得不稳定。
放弃网格系统并恢复为 css 并添加 html。这可行，但看起来很老套。

后一种解决方案如下所示：

<div id="totalcontent">
  <div id="header">content</div>
  <div id="main"><div class="inner">content</div></div>
  <div id="sidebar"><div class="inner">content</div></div>
  <div id="footer">content</div>
</div>

<style>
#main           {width:calc( 900px + ( (98vw - 1200px) / 2) );}
#main .inner    {max-width:900px; float:right}
#sidebar        {width:calc( 300px + ( (98vw - 1200px) / 2) );}
#sidebar. inner {max-width:300px; float:left;}
</style>

<!-- 98vw instead of 100vw as a safety margin to account for gap -->

问题

问题似乎是您可以使用 justify-content:center; 将单个网格项目居中放置在一行中，但您不能将多个网格项目居中放置在一行中。那是对的吗？如果没有，我该怎么做？

Answer 1

我认为你的方法太复杂了。这是 @media 的示例，但没有在屏幕调整大小时跳转。

首先我们使用 grid-template-columns: auto 900px 300px auto;，当屏幕达到 1200px 宽度后 - 切换到 grid-template-columns: auto 3fr 1fr auto;

只要1200px我们可以想象成4fr，那么900px就是3fr，300px就是1fr。这将最大限度地减少 @media 开关上的任何跳跃。

body {
  margin: 0;
  padding: 0;
}

#totalcontent {
  display: grid;
  grid-template-areas:
    'header header header header'
    '. main sidebar .'
    'footer footer footer footer';
  grid-template-columns: auto 900px 300px auto;
  
}

@media (max-width: 1200px) {
  #totalcontent {
    grid-template-columns: auto 3fr 1fr auto;
  }
}

#header {
  grid-area: header;
  background: #555
  min-height: 100px;
}

#main {
  grid-area: main;
  background: #777;
  min-height: 100px;
}

#sidebar {
  grid-area: sidebar;
  background: #999;
  min-height: 100px;
}

#footer {
  grid-area: footer;
  background: #aaa;
  min-height: 100px;
}

#header img {max-width: 100%;}

<div id="totalcontent">
  <div id="header"><img src="http://via.placeholder.com/1800x190">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </div>
  <div id="main">content</div>
  <div id="sidebar">content</div>
  <div id="footer">content</div>
</div>

CSS 全宽 header/footer 和较窄 main/sidebar 的网格

CSS Grid with fullwidth header/footer and narrower main/sidebar

html

css

position

css-grid