<div class="grid-wrapper layout-1">
        <div class="grid-item diamond-small diamond-s1">
            <div class="diamond__content">
                <p>small diamond</p>
            </div>
        </div>
        <div class="grid-item diamond-med diamond-m1">
            <div class="diamond__content">
                <p>medium diamond</p>
            </div>
        </div>
        <div class="grid-item diamond-large">
            <div class="diamond__content">
                <p>large diamond</p>
            </div>
        </div>
        <div class="grid-item diamond-small diamond-s2">
            <div class="diamond__content">
                <p>small diamond</p>
            </div>
        </div>
        <div class="grid-item diamond-med diamond-m2">
            <div class="diamond__content">
                <p>medium diamond</p>
            </div>
        </div>
    </div>

    <div class="grid-wrapper layout-2">
        <div class="grid-item diamond-small diamond-s1">
            <div class="diamond__content">
                <p>small diamond</p>
            </div>
        </div>
        <div class="grid-item diamond-med diamond-m1">
            <div class="diamond__content">
                <p>medium diamond</p>
            </div>
        </div>
        <div class="grid-item diamond-large">
            <div class="diamond__content">
                <p>large diamond</p>
            </div>
        </div>
        <div class="grid-item diamond-small diamond-s2">
            <div class="diamond__content">
                <p>small diamond</p>
            </div>
        </div>
        <div class="grid-item diamond-med diamond-m2">
            <div class="diamond__content">
                <p>medium diamond</p>
            </div>
        </div>
    </div>
    <svg class="clip-svg">
        <clipPath id="clip-diamond-demo" clipPathUnits="objectBoundingBox">
            <polygon points="0.5 0, 1 0.5, 0.5 1, 0 0.5" />
        </clipPath>
    </svg>

@import url(https://fonts.googleapis.com/css?family=Roboto+Slab);
p {
  font-family: 'Roboto Slab';
  font-size: 82.5%;
}

@mixin cf {
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}

$gridUnit: 95vw / 16;
$small: $gridUnit * 4;
$med: $gridUnit * 6;
$large: $gridUnit * 8;

.grid-wrapper {
    @include cf;
    position: relative;
    height: $gridUnit * 11;
}
.grid-item {
    position: absolute;
    border: 1px solid lightgrey;
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    clip-path: url("#clip-diamond-demo");
}
.diamond-small {
    background-color: limegreen;
    height: $small;
    width: $small;
    .diamond__content {
        height: $small;
        width: $small;
    }
}
.diamond-med {
    background-color: orange;
    height: $med;
    width: $med;
    .diamond__content {
        height: $med;
        width: $med;
    }
}
.diamond__content {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.layout-1 {
    .diamond-s1 {
    top: $gridUnit;
    left: $gridUnit * 2;
}
    .diamond-m1 {
        top: $gridUnit * 5;
        left: $gridUnit;
    }
    .diamond-s2 {
        top: $gridUnit * 5;
        left: $gridUnit * 10;
    }
    .diamond-m2 {
        top: -$gridUnit;
        left: $gridUnit * 9;
    }
    .diamond-large {
        background-color: yellow;
        height: $large;
        width: $large;
        top: $gridUnit * 1;
        left: $gridUnit * 4;
        .diamond__content {
            height: $large;
            width: $large;
        }
    }
}

.layout-2 {
    .diamond-s1 {
        top: $gridUnit * 6;
        left: $gridUnit * 2;
    }
    .diamond-s2 {
        top: $gridUnit * 2;
        left: $gridUnit * 10;
    }
    .diamond-m1 {
      left: $gridUnit;
    }
    .diamond-m2 {
        top: $gridUnit * 6;
        left: $gridUnit * 9;
    }
    .diamond-large {
        background-color: yellow;
        height: $large;
        width: $large;
        top: $gridUnit * 2;
        left: $gridUnit * 4;
        .diamond__content {
            height: $large;
            width: $large;
        }
    }
}