Clipping Mask Design with multiple shapes / elements

Question

I currently have this design piece to create. I initially built it using 3 separate square div containers with independent background images just clipped out of the design, but this feels a big rigid to me (we would need to chop up and re-stage a new image each time we want to change it) as well as bulky. Ideally, I'd like to use one single image across each element container so that it can be easily updated. This also saves on two unnecessary server requests, which I'm in favor of!

Just wanted to poll to see if there's a better / more dynamic way to accomplish this. Thinking perhaps with javascript? Any help or points in the right direction would be greatly appreciated. Below is an outline of how I currently have it built. Attached is snippet of the design mockup for reference.

HMTL

<div class="grid-container">
  <div class="grid-1 gi" style="background-image:url(image1.jpg);">Facebook</div>
  <div class="grid-2 gi" style="background-image:url(image2.jpg);">Twitter</div>
  <div class="grid-3 gi" style="background-image:url(image3.jpg);">Instagram</div>
</div> 

CSS

.gi {
  background-position: center center;
  background-size: cover;
  width: 32.333%;
}
.grid-1 {
  margin-right: 1%;
}
.grid-2 {
  margin: 0 1%;
}
.grid-3 {
  margin-left: 1%;
}

Answer 1

So, I'm dumb and found a simple and elegant workaround! Rather than clipping, I just created two pseudo borders to server as dividers inside a wrapper with the desired background image and gave each the proper background color. Solution & jsfiddle below.

HTML

<div class="social-blocks flex" style="background-image: url(http://localhost:8888/sts-store/wp-content/uploads/2016/01/eric.jpg)">

    <div class="social-block auto-ar oneone flex align-center-center block-1" style="height: 381px;">
        <div>facebook</div>
    </div>
    <div class="pseudo-margin"></div>
    <div class="social-block auto-ar oneone flex align-center-center block-2" style="height: 381px;">
        <div>twitter</div>
    </div>
    <div class="pseudo-margin"></div>
    <div class="social-block auto-ar oneone flex align-center-center block-3" style="height: 381px;">
        <div>instagram</div>
    </div>
</div>

CSS

.align-center-center {
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -o-justifty-content: center;    
}
.flex {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
}
.social-block {
    width: 32.333%;
    overflow: hidden;
    position: relative;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 28px;
    font-style: italic;
}
.social-blocks {
    margin-bottom: 2%;
    background-position: center bottom;
    background-size: cover;
}
.social-blocks-bg {
    width: 100%;
}
.pseudo-margin {
    width: 2%;
    background-color: rgb(247,247,247);
}

https://jsfiddle.net/942g38qv/8/