<div class="wrapper">
  <div style="background: #EBEBEB;"></div>
  <div style="background: #D9D9D9;"></div>
  <div style="background: #B9B9B9;"><h1>3n</h1></div>  
  <div style="color: #fff; background: #222222;"><h1>3n+1 <br> </h1></div>
  <div style="background: #ebebeb;"><h1>3n+2<br> :last-child</h1></div>
</div>
@import url(https://fonts.googleapis.com/css?family=Montserrat);

body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  text-align:center;
  color:inherit;
}

h1 {
  font-size:140%;
  font-weight:300;
  margin:0;
  width:100%;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}
.wrapper div {
  position:relative;
  height: 50vh;
  float:left;
  width:33.33%;
}

.wrapper div:nth-child(3n+1):last-child {
  width:100%;
}

.wrapper div:nth-child(3n+2):last-child {
  width:66.66%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.