Как разделить один div на 4 одинаковые части?

body { 
  margin: 0; 
  font-family: sans-serif; 
} 
 
.wrapper { 
  display: flex; 
  width: 100%; 
  height: 350px; 
} 
 
.wrapper-inner { 
  position: relative; 
  align-self: stretch; 
  flex-grow: 1; 
  background-size: cover; 
  background-position: center; 
} 
 
.wrapper-inner:after { 
  content: ''; 
  position: absolute; 
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  background-color: rgba(55, 71, 79, 0.5); 
  z-index: 1; 
} 
 
.wrapper-inner._bg-0 { 
  background-image: url(http://i.imgur.com/iLYwNUt.jpg); 
} 
 
.wrapper-inner._bg-1 { 
  background-image: url(http://i.imgur.com/Hk0pCIG.jpg); 
} 
 
.wrapper-inner._bg-2 { 
  background-image: url(http://i.imgur.com/hYsr8VD.jpg); 
} 
 
.wrapper-inner._bg-3 { 
  background-image: url(http://i.imgur.com/7ovysYf.jpg); 
} 
 
.wrapper-inner-title { 
  position: relative; 
  font-weight: 700; 
  text-transform: uppercase; 
  font-size: 14px; 
  color: white; 
  padding: 16px; 
  z-index: 2; 
} 
 
.wrapper-inner-subtext { 
  position: absolute; 
  color: white; 
  text-transform: uppercase; 
  font-size: 9px; 
  transform: rotate(-90deg); 
  padding: 16px; 
  bottom: 62px; 
  left: -62px; 
  letter-spacing: 0.4em; 
  z-index: 2; 
}

<div class="wrapper"> 
  <div class="wrapper-inner _bg-0"> 
    <div class="wrapper-inner-title">Modern living room</div> 
    <div class="wrapper-inner-subtext">Interior design</div> 
  </div> 
  <div class="wrapper-inner _bg-1"> 
    <div class="wrapper-inner-title">Modern living room</div> 
    <div class="wrapper-inner-subtext">Interior design</div> 
  </div> 
  <div class="wrapper-inner _bg-2"> 
    <div class="wrapper-inner-title">Modern living room</div> 
    <div class="wrapper-inner-subtext">Interior design</div> 
  </div> 
  <div class="wrapper-inner _bg-3"> 
    <div class="wrapper-inner-title">Modern living room</div> 
    <div class="wrapper-inner-subtext">Interior design</div> 
  </div> 
</div>

*{ 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
 
.items{      
  overflow: hidden;   
  font-size: 0;   
} 
.item{   
  font-size: 12px; 
  height: 100vh;   
  width: 25%; 
  display: inline-block; 
  vertical-align: top;   
  background: #ccc; 
  position: relative; 
} 
.item:nth-of-type(even){ 
  background: #ddd; 
} 
.item:after{ 
  content: 'text design'; 
  position: absolute; bottom: 5%; left: 5%; 
  text-transform: uppercase;   
  writing-mode: vertical-lr;   
  transform: rotate(180deg); 
  opacity: .5; 
}

<div class="items"> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div>   
</div>

.flex { 
  display: flex; 
} 
 
.flex > div { 
  flex: 1; 
  border: 1px solid #ccc; 
}

<div class="flex"> 
  <div>1</div> 
  <div>2</div> 
  <div>3</div> 
  <div>4</div> 
</div>

.div1 { 
  width: 70%; 
  min-height: 150px; 
  background: #ccc; 
  float: left; 
} 
 
.div2 { 
  width: 30%; 
  min-height: 150px; 
  background: #c00; 
  margin-left: 70%; 
} 
 
.footer { 
  clear: left; 
  background: #000; 
  min-height: 50px; 
}

<div class="div1">div1</div> 
<div class="div2">div2</div> 
<div class="footer"></div>