方形网格内的重叠元素

Question

我要实现一个基于方形网格的布局。如下图所示，某些元素必须在此网格内重叠响应。 （正方形在 x 轴上偏移，在 y 轴上重叠一个网格单元格。）

http://i.stack.imgur.com/9bZ5G.jpg

有人知道如何实现这个效果吗？我正在使用框架 Foundation 6。我更喜欢没有 JavaScript 的解决方案。我不能使用 Foundation .#-push-# 和 .#pull-# 类，因为它们会将元素向内移动，并且两个正方形必须位于不同的行中。

I’ve set up a JSFiddle containing the two squares.

.square {
  background: #f00;
  position: relative;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
}

.dark {
  background: #cbcbcb;
}

.light {
  background: #dedede;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.0/foundation.css" rel="stylesheet"/>
<div class="row">
  <div class="small-12 columns">
    <div class="row">
      <div class="small-8 columns end">
        <div class="square dark">
          <div class="content">test</div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="small-6 small-offset-6 columns end">
        <div class="square light">
          <div class="content">test</div>
        </div>
      </div>
    </div>
  </div>
</div>

非常感谢您的帮助。

Answer 1

我知道这个问题有点老了，但为了所有这一切的好处，现在使用 CSS Grid 可以轻松而干净地实现。以原始问题中发布的图像为例，我们定义了一个容器和两个正方形：

<div class="container">
   <div class="content square1">Square 1</div>
   <div class="content square2">Square 2</div>
</div>

然后在 CSS 中将容器定义为具有 6 列和 6 行的 CSS Grid。在下面的示例中，我使用了repeat() CSS 方法让浏览器创建 6 个相同大小的列和行。

.container {
  display: grid;
  grid-column-template: repeat(6, 1fr);
  grid-row-template: repeat(6, 30px);
  width: 100%;
  height: 600px;
}

然后，对于您设置的每个项目，左上角将位于该网格上的位置。您可以使用grid-column-start, grid-column-end, grid-row-start, 和grid-row-end 的长手属性，但我发现使用短手属性更容易，如下所示：

.square1 {
  grid-column: 1 / 5;
  grid-row: 1 / 5;
  background: #cbcbcb;
}
.square2 {
  grid-column: 4 / 7;
  grid-row: 4 / 7;
  background: #dedede;
}

就放置而言，您可以根据您在容器中不可见地绘制的网格线来指定它。在这种情况下，位置1 / 1 是最左上角（或者如果您在谈论坐标，则为 0,0 的位置）。 CSS Grid 现在得到了广泛的支持，我相信如果你不想用特性查询硬编码自己的代码，那么有一些 JS 库可以为此创建后备。

以下是 SO Code Snippet 运行器的完整代码块：

.container {
  display: grid;
  grid-column-template: repeat(6, 1fr);
  grid-row-template: repeat(6, 30px);
  width: 100%;
  height: 600px;
}
.square1 {
  grid-column: 1 / 5;
  grid-row: 1 / 5;
  background: #cbcbcb;
}
.square2 {
  grid-column: 4 / 7;
  grid-row: 4 / 7;
  background: #dedede;
}

<div class="container">
   <div class="content square1">Square 1</div>
   <div class="content square2">Square 2</div>
</div>

Answer 2

如果您使用百分比计算偏移量并注意列间距，它似乎可以工作。因此，我调整了 sn-p 并添加了另一个具有 4 列的正方形：

.square {
  background: #f00;
  position: relative;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
}

.dark {
  background: #cbcbcb;
}

.light {
  background: #dedede;
}

/* NEW */
.small-6.columns.overlap-top > .square {
  margin-top: calc(-33.3% + 1.33*0.625rem); // one third is 33.3% minus 1.33 times col spacing
}

.small-4.columns.overlap-top > .square {
  margin-top: calc(-50% + 1*0.625rem); // one half is 50% minus 1 times col spacing
}

@media screen and (min-width: 40em) {
  .small-6.columns.overlap-top > .square {
   margin-top: calc(-33.3% + 1.33*0.9375rem);
  }

  .small-4.columns.overlap-top > .square {
    margin-top: calc(-50% + 1*0.9375rem);
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.0/foundation.css" rel="stylesheet"/>
<div class="row">
  <div class="small-12 columns">
    <div class="row">
      <div class="small-8 columns end">
        <div class="square dark">
          <div class="content">Square 1</div>
        </div>
      </div>
    </div>
    <div class="row">
      <!-- New class overlap-top -->
      <div class="small-6 small-offset-6 columns overlap-top end">
        <div class="square light">
          <div class="content">Square 2</div>
        </div>
      </div>
    </div>
    <!-- New square -->
    <div class="row">
      <div class="small-4 small-offset-4 columns overlap-top end">
        <div class="square dark">
          <div class="content">Square 3</div>
        </div>
      </div>
    </div>
  </div>
</div>

JSFiddle：https://jsfiddle.net/jwt0k1pw/1/

希望这会有所帮助！