CSS GRID: Placing items.

by Rodwyn Moreno

HTML

<section class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</section>

SCSS

.wrapper {
  display: grid;
  grid-template-columns: 100px 120px 150px;
  grid-template-rows: 25px 50px 100vh;
}

div {
  &:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 4;
  }
  
  &:nth-child(6) {
    grid-column: 2 / 4;
  }
}

div {
    color: #FFFFFF;
    text-align: center;
    
    &:nth-child(1) {
      background: #FF1A1A;
    }

    &:nth-child(2) {
      background: #009999;
    }
    
    &:nth-child(3) {
      background: #FF9900;
    }
    
    &:nth-child(4) {
      background: #CC66FF;
    }
    
    &:nth-child(5) {
      background: #00FF99;
    }
    
    &:nth-child(6) {
      background: #FFFF33;
    }
  }