如何将网格背景扩展到网格外部，同时将网格保持在页面中心？

Question

不久前，我被聘请创建公司网站。在Zurb Foundation Framework的帮助下，我创建了这样的布局网站：

它只是一个有几行的网格（用于标题，主要区域和页脚），每个行分为两列（左侧4个，右侧8个）。

客户喜欢这种设计，因此将其部署到生产中。

几个月后，客户开始想要在这个网站设计中有新的东西。所以他聘请了独立设计师进行咨询。设计师说一切都很好，但它需要一些“简单的功能” - 一些视觉块的背景颜色。他拍摄了网站的截图并将其发送给客户。

通过编辑，新网站布局应如下所示：

有没有办法让块背景扩展到网格外部，同时将网格本身保持在页面中心？如果它不可能，并且唯一的方法是为“扩展背景”添加额外的块 - 如何保持它们的高度和位置与主要布局块同步？

有没有办法在没有重建整个布局的情况下以最少的编辑数来获得这个？

Answer 1

您可以使用背景大小和渐变或图像位置：

你可以反转渐变.... （在下面用codepen链接的示例）

codepen to play with

main , header div, footer div{
  width:800px;
  margin:auto;
  box-shadow: 0 0 5px;
}
* {
  box-sizing:border-box;
}
section , header h1, footer nav{
  width:600px;
  float:right;
  padding:1em;
}
footer h3 {
  float:left;
  width:200px;
}
footer {
  text-align:center;
  line-height:50px;
  overflow:hidden;
}
li {
  display:inline-block;
  margin:0;
}
aside {
  padding:1em;
  overflow:hidden;
}
html {
  background:linear-gradient(to left, gray 74.25%,black,  white 74.5% ) center repeat-y ,linear-gradient(to left, gray 50%, white 50% ) gray repeat-y top right;
  background-size: 800px 800px, 100% 100% ;
  min-width:800px;/* mind this */
}
img {
  margin:20px 50px;
}
header{
  background:linear-gradient(to left, white 74.25%,black,  gray 74.5% ) center repeat-y ,linear-gradient(to left, white 50%, gray 50% ) gray repeat-y top right;
  background-size: 800px 800px, 100% 100% ;
  min-width:800px;/* mind this */
}
 footer {
  background:linear-gradient(to left, white 74.25%,black,  gray 74.5% ) center repeat-y ,linear-gradient(to left, turquoise 50%, tomato 50% ) gray repeat-y top right;
  background-size: 800px 800px, 100% 100% ;
  min-width:800px;/* mind this */
}
body {
  margin:0;
  display:flex;
  min-height:100vh;
  flex-direction:column;
}
main {
  flex:1;
  }

<header>
  <div class="top">
    <h1> play me in full page</h1>
    <img src="http://lorempixel.com/100/100/"/>
  </div>
</header>
<main>
  <section><h1>HTML Ipsum Presents</h1>
	       
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>
	       
<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
</section>
<aside>
<h3>Header Level 3</h3>

<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}
</code></pre>
</aside>
</main>
<footer>
  <div class="top">
    <h3>footer title </h3>
    <nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Clients</a></li>
		<li><a href="#">Contact Us</a></li>
	</ul>
</nav>
  </div>
</footer>