Latest News Layout

by shanejones

HTML

<div class="latest-news">
  <div class="feature-item"><span></span></div>
  <div class="feature-item"><span></span></div>
  <div class="more">
    <div class="item"><span></span></div>
    <div class="item"><span></span></div>
    <div class="item"><span></span></div>
    <div class="item"><span></span></div>
  </div>
</div>

SCSS

.latest-news {
  display:flex;
  width: 100%;
  
  span {
    display:block;
    width: 100%;
    height:100%;
    background: #ccc;
    border: 5px solid white;
  }
  
  .feature-item {
    width: 33.3333%;
    height: 300px;
  }
  .more {
    width: 33.3333%;
    height: 300px;
    display: flex;
    flex-wrap: wrap;
  }
  
  .item {
    width: 50%;
    height: 150px;
  }
  
}