.wrapper
  .grid
    .grid__item.grid__item--2-3
      .block wide
    .grid__item.grid__item--1-3
      .block narrow
    .grid__item.grid__item--1-3
      .block narrow
    .grid__item.grid__item--1-3
      .block narrow
    .grid__item.grid__item--1-3
      .block narrow
    .grid__item.grid__item--1-3
      .block narrow
    .grid__item.grid__item--2-3
      .block wide
    .grid__item.grid__item--1-3
      .block narrow
    .grid__item.grid__item--1-3
      .block narrow
    .grid__item
    .grid__item
View Compiled
*
  box-sizing border-box


.wrapper
  min-height 100vh
  background #f3f3f3
  display flex
  align-items center
  justify-content center


.grid
  display flex
  flex-wrap wrap
  justify-content space-between
  
  max-width 980px
  margin-left auto
  margin-right auto
  
  &__item
    display block
    padding .25em 1em
    margin-bottom 2%
    
    text-align center
    text-transform uppercase
    letter-spacing .15em   
    
    &:empty
      flex 0 0 33%
      height 0
      
    
    &--1-3
      flex 0 0 33.333333333333333333333333333333%
    
    &--2-3
      flex 0 0 66.666666666666666666666666666667%

      
.block
  padding 1em
  background #fff
  color #333
  font-weight bolder
  font-family "Helvetica Neue", Arial

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.