Overlapping elements within a square grid

Question

I’ve to implement a layout based on a square grid. As shown on the following image, some elements have to overlap responsive within this grid. (The squares are offset on the x-axis and overlap by one grid cell on the y-axis.)

https://i.sstatic.net/9bZ5G.jpg

Does anybody know how to achieve this effect? I'm using the framework Foundation 6. I’d prefer a solution without JavaScript. I can’t use the Foundation .#-push-# and .#pull-# classes because they would shift the elements inwards and the two squares have to be in separate rows.

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>

Many thanks in advance for your help.

Answer 1

I know this question is a little bit old, but for the benefit of all this is now very easily and cleanly possible with CSS Grid. Taking the image posted in the original question we define a container and two squares:

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

Then in the CSS define the container as a CSS Grid with 6 columns and 6 rows. In the example below I have used the repeat() CSS Method to have the browser create 6 of the same sized columns and rows.

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

Then for each item you set where the upper left hand corner will be located on that grid. You can use the long handed properties of grid-column-start, grid-column-end, grid-row-start, and grid-row-end, but I find it's easier to use the short hand properties as shown below:

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

As far as the placement goes, you specify it based on the grid lines you're invisibly drawing in the container. Position 1 / 1 in this case is the upper left-most corner (or where 0,0 would be if you're talking about coordinates). CSS Grid is now widely supported and I believe there are some JS libraries out there that do create fall backs for this if you don't want to hard code your own with feature queries.

Here's the full block of code with the SO Code Snippet runner:

.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

It seems to work if you calculate the offset with percent and also mind the column spacing. I therefore adjustet the snippet and added another square with 4 colums:

.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/

Hope this helps!