Grid Ej2

Grid Ej2

by Juan Muñoz

HTML

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis saepe, quas repellat harum error dolorem nostrum provident tempore necessitatibus aspernatur accusamus enim! Explicabo sint dolores ratione ipsa molestias quod, illo, eaque nostrum. Labore id, modi hic eveniet, molestias eligendi possimus.</div>
</div>
<!-- https://codepen.io/tutsplus/pen/ZpzrxV -->

CSS

.wrapper{

  height:97vh;
    grid-template-columns: 1fr;
   grid-auto-rows: auto;
    background-color:red;
  }
  *{
    color:white !important;
  }
.wrapper div{
    border: 2px solid rgb(233,171,88);
    border-radius: 5px;
    background-color: rgba(233,171,88,.5);
    padding: 1em;
    color: #d9480f;
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two { 
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
  column-count:4;
  column-gap:90px;
  column-rule: dotted 3px red;
}
 .wrapper div.one:nth-child(1) {
    order: 3;
    background-color:pink;
  }
  
  .wrapper div.two:nth-child(2) {
    order: 2;
    background-color:green;
  }
  
  .wrapper div.three:nth-child(3) {
    order: 1;
    background-color:red;
  }
  
  .wrapper div.four:nth-child(4) {
    order: 4;
    background-color:gray;
  }
  .wrapper div.five:nth-child(5) {
    order: 6;
  }
  
  .wrapper div.six:nth-child(6) {
    order: 5;
  }
@media only screen and (min-width: 768px) {
  
  .wrapper {
    height:97vh;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(5em, auto);
    grid-gap: 4px;
    grid-column-gap:4px;
    grid-row-gap:4px;
    background-color:black;
  }
  
  
 
}