Clipped Overlapping Grid Items

Hristovv demonstrates how `clip-path` can help build magazine-style photo layouts with CSS.

See the Pen Clipped overlapping grid items by hristov. (@hristovv) on CodePen.

Created on March 27, 2020 Updated on March 27, 2020. A Pen by hristov. on CodePen. License.

index.html

<div class="row">
    <div class="box box--left">
        <div class="box__inner">
            <a href="#">
                <img src="https://source.unsplash.com/random/1024x600" alt="">
            </a>
        </div>
    </div>

    <div class="box box--right">
        <div class="box__inner">
            <a href="#">
                <img src="https://source.unsplash.com/random/1024x601" alt="">
            </a>
        </div>
    </div>

    <div class="box box--left box--small">
        <div class="box__inner">
            <a href="#">
                <img src="https://source.unsplash.com/random/1024x602" alt="">
            </a>
        </div>
    </div>

    <div class="box box--right box--small">
        <div class="box__inner">
            <a href="#">
                <img src="https://source.unsplash.com/random/1024x603" alt="">
            </a>
        </div>
    </div>
</div>

* {
    box-sizing: border-box;
}

.row {
    padding: 0.75vw;

    display: grid;
    grid-template-columns: repeat(64, 1fr);
    grid-template-rows: 55vh 30vh;
    grid-row-gap: 0.75vw;
}

.box a {
    display: block;
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;
    left: 0;

    &:hover img {
        opacity: 0.75;
    }
}

.box__inner {
    background-color: #005696;
    width: 100%;
    height: 100%;
    position: relative;

    img {
        width: 100%;
        height: 100%;

        object-position: 50% 50%;
        object-fit: cover;
        
        transition: opacity .2s ease-out;
    }
}

.box--left {
    clip-path: polygon(0 0, 98% 0, 83% 100%, 0 100%);
    grid-row: 1;
    grid-column: 1 / span 35;
}

.box--right {
    clip-path: polygon(17% 0, 100% 0, 100% 100%, 2% 100%);
    grid-row: 1;
    grid-column: span 35 / -1;
}

.box--small {
    grid-row: 2;
    
    &.box--left {
        clip-path: polygon(0 0, 83% 0, 98% 100%, 0 100%);
    }
    
    &.box--right {
        clip-path: polygon(2% 0, 100% 0, 100% 100%, 17% 100%);
    }
}   

* {
  box-sizing: border-box;
}

.row {
  padding: 0.75vw;
  display: grid;
  grid-template-columns: repeat(64, 1fr);
  grid-template-rows: 55vh 30vh;
  grid-row-gap: 0.75vw;
}

.box a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.box a:hover img {
  opacity: 0.75;
}

.box__inner {
  background-color: #005696;
  width: 100%;
  height: 100%;
  position: relative;
}
.box__inner img {
  width: 100%;
  height: 100%;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: opacity .2s ease-out;
  transition: opacity .2s ease-out;
}

.box--left {
  -webkit-clip-path: polygon(0 0, 98% 0, 83% 100%, 0 100%);
          clip-path: polygon(0 0, 98% 0, 83% 100%, 0 100%);
  grid-row: 1;
  grid-column: 1 / span 35;
}

.box--right {
  -webkit-clip-path: polygon(17% 0, 100% 0, 100% 100%, 2% 100%);
          clip-path: polygon(17% 0, 100% 0, 100% 100%, 2% 100%);
  grid-row: 1;
  grid-column: span 35 / -1;
}

.box--small {
  grid-row: 2;
}
.box--small.box--left {
  -webkit-clip-path: polygon(0 0, 83% 0, 98% 100%, 0 100%);
          clip-path: polygon(0 0, 83% 0, 98% 100%, 0 100%);
}
.box--small.box--right {
  -webkit-clip-path: polygon(2% 0, 100% 0, 100% 100%, 17% 100%);
          clip-path: polygon(2% 0, 100% 0, 100% 100%, 17% 100%);
}