<div class="container">
<header>Grid — Studies</header>
  <div class="gallerycontainer1">
    <div class="g1-item01wrap">
      <div class="gallery1-item01">01</div>
    </div>
    <div class="gallery1-item02">02</div>
    <div class="gallery1-item03">03</div>
    <div class="gallery1-item04">04</div>
    <div class="gallery1-item05">05</div>
  </div>
   <div class="gallerycontainer2">
    <div class="gallery2-item01">01</div>
    <div class="gallery2-item02">02</div>
    <div class="gallery2-item03">03</div>
    <div class="gallery2-item04">04</div>
    <div class="gallery2-item05">05</div>
  </div>
  <div class="gallerycontainer3">
    <div class="g3-item01wrap">
      <div class="gallery3-item01">01</div>
    </div>
    <div class="gallery3-item02">02</div>
    <div class="gallery3-item03">03</div>
    <div class="gallery3-item04">04</div>
    <div class="gallery3-item05">05</div>
  </div>
  <div class="gallerycontainer4">
    <div class="gallery4-item01">01</div>
    <div class="gallery4-item02">02</div>
    <div class="gallery4-item03">03</div>
    <div class="gallery4-item04">04</div>
    <div class="gallery4-item05">05</div>
  </div>
   <footer>702 © │ TOLGA OZISIK</footer>
  </div>

@import "susy";
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,500);

$susy: (
  columns: 12,
  gutters: 1/4,
  math: fluid,
  output: float,
  debug: (
    image: hide,
    output: background,
    color: blue,
  ),
);

* {
  padding: 0;
  margin: 0;
  font-family: "Roboto";
}

.container {
  @include container;
  header { background-color: lavender;
          padding: span(1);
          text-align: center;
  }
}

.gallerycontainer1 {
 
  @include span(2);
  
  
  
  .gallery1-item01{
    background: blueviolet+(-20);
    height: 150px;
     }
  
  .gallery1-item02{
    background: blueviolet;
    height: 200px;
    
  }
  .gallery1-item03{
    background: blueviolet+(20);
    height: 150px;
    @include span(last 4 of 4);
    
  } 
  .gallery1-item04{
    background: blueviolet+(40);
    height: 150px;
    @include span(last 4 of 4);
  } 
   .gallery1-item05{
    background: blueviolet+(60);
    height: 150px;
    @include span(last 4 of 4);
  } 
  
}
.gallerycontainer2 {
  @include span(3);
 
  margin-bottom: gutter();
}
.gallerycontainer3 {
  @include span(4);
  
  margin-bottom: gutter();
}
.gallerycontainer4 {
  @include span(last 3);
 
}

.gallerycontainer5 {
  @include span(4);
  
}

.gallery2-item01{
    background: blueviolet+(-20);
    height: 150px;
     }
  
  .gallery2-item02{
    background: blueviolet;
    height: 200px;
    
  }
  .gallery2-item03{
    background: blueviolet+(20);
    height: 150px;
    @include span(last 4 of 4);
    
  } 
  .gallery2-item04{
    background: blueviolet+(40);
    height: 150px;
    @include span(last 4 of 4);
  } 
   .gallery2-item05{
    background: blueviolet+(60);
    height: 150px;
    @include span(last 4 of 4);
  } 

.gallery3-item01{
    background: blueviolet+(-20);
    height: 150px;
     }
  
  .gallery3-item02{
    background: blueviolet;
    height: 200px;
    
  }
  .gallery3-item03{
    background: blueviolet+(20);
    height: 150px;
    @include span(last 4 of 4);
    
  } 
  .gallery3-item04{
    background: blueviolet+(40);
    height: 150px;
    @include span(last 4 of 4);
  } 
   .gallery3-item05{
    background: blueviolet+(60);
    height: 150px;
    @include span(last 4 of 4);
  } 

.gallery4-item01{
    background: blueviolet+(-20);
    height: 150px;
     }
  
  .gallery4-item02{
    background: blueviolet;
    height: 200px;
    
  }
  .gallery4-item03{
    background: blueviolet+(20);
    height: 150px;
    @include span(last 4 of 4);
    
  } 
  .gallery4-item04{
    background: blueviolet+(40);
    height: 150px;
    @include span(last 4 of 4);
  } 
   .gallery4-item05{
    background: blueviolet+(60);
    height: 150px;
    @include span(last 4 of 4);
  } 

footer {@include full;
  text-align: center;
  padding: gutter();
}