网格系统如何补偿柱高的变化？答案

【问题标题】：how does grid system compensate for variation in column heights?网格系统如何补偿柱高的变化？
【发布时间】：2013-04-30 04:12:32
【问题描述】：

下面我使用的是从 12 格 960 像素系统中提取的内容。

<style>
body {
  background: gray;
}

#container_12 {
   width: 960px;
   margin-left: auto;
   margin-right: auto;
   background: white;
   overflow: hidden;
}

.column_1, .column_2, .column_3, .column_4, .column_5, .column_6, .column_7, .column_8, .column_9, .column_10, .column_11, .column_12 {
  float : left;
  margin-left : 10px;
  margin-right : 10px;
  margin-bottom: 10px;
} 

.column_1 {
  width : 60px;
}

.column_2 {
  width : 140px;
}

.column_3 {
  width : 220px;
}

.column_4 {
  width : 300px;
}

.column_5 {
  width : 380px;
}

.column_6 {
  width : 460px;
}

.column_7 {
  width : 540px;
}

.column_8 {
  width : 620px;
}

.column_9 {
  width : 700px;
}

.column_10 {
  width : 780px;
}

.column_11 {
  width : 860px;
}

.column_12 {
  width : 940px;
} 

</style>

<body>
  <div id="container_12">

    <!-- First row -->
      <div class="column_1" style="height: 400px; background: red;">
      </div>
      <div class="column_11" style="height: 200px; background: red;">
      </div>

    <!-- Second row -->
    <!--
    This column overlaps into second row
    <div class="column_1">
    </div>
     -->

      <div class="column_5" style="height: 200px; background: green;">
      </div>
      <div class="column_3" style="height: 200px; background: green;">
      </div>
      <div class="column_3" style="height: 200px; background: green;">
      </div>

  </div>
</body>

输出：

http://jsfiddle.net/hnDtY/

现在假设我将上面的两行复制到总共 4 行。但我想给前两行一个紫色背景，最后两行一个白色背景：

http://jsfiddle.net/QZuED/

我上面所做的问题是我必须创建一个名为“row”的新 div 并将它包裹在两列周围。这使得它与布局的其余部分不一致，其中没有包含每一行的 div“行”。如果我在每一行上添加一个 div“行”并给它一个溢出：隐藏属性，那么一列将不可能跨越两行，因为它会将第二行中的项目向下推。那么网格系统是如何处理这种情况的呢？

【问题讨论】：

标签： css grid-system

【解决方案1】：

确实，将块嵌套在 div 中会迫使它们无法扩展到内容的其余部分。我发现最常用的答案是重复的背景图片。

body {
    background: gray url(web.png) repeat-x;
}

这还允许您使用渐变到背景的其余部分。这是你的 jsfiddle tweaked to reflect this。

【讨论】：

那么这个系统是如何摆脱在每组列周围设置行 div 的：responsivegridsystem.com
因为它不会尝试将任何 div 从一个“行”div 扩展到另一个。它的功能似乎与您列出的第二个示例非常相似。也许我误会了你？
所以添加重复的背景图像或在具有溢出属性的 div 中嵌套多个列：隐藏是唯一可能的解决方案（不求助于表格）？