Test Grid

by benedict_chan

HTML

<div class="grid-6-col">
 <div>
      <div class="m">Tesing 1</div>
      <div class="-item">Tesing 1</div>
      <div class="-item">Tesing 1</div>
   
 </div>

 <div>Two</div>
 <div>Three</div>
 <div>Four</div>
 <div>Five</div> 
 <div>Six</div>


</div> 


<div class="grid-6-col">

    <div class="grid-33-wrapper ">
      <div class="grid-33-col ">
          <div class="grid-33-item"></div>
      </div>
      <div class="grid-33-col">
        <div class="grid-33-item">CM</div>
      </div>
       <div class="grid-33-col">
         <div class="grid-33-item">R1</div>
         <div class="grid-33-item"></div>
          <div class="grid-33-item"></div>

       </div>
    </div>

     <div class="grid-33-wrapper ">
      <div class="grid-33-col ">
          <div class="grid-33-item"></div>
      </div>
      <div class="grid-33-col">
        <div class="grid-33-item">CM</div>
      </div>
       <div class="grid-33-col">
         <div class="grid-33-item">R1</div>
         <div class="grid-33-item"></div>
          <div class="grid-33-item"></div>
       </div>
    </div>
    
      <div class="grid-33-wrapper ">
      <div class="grid-33-col ">
          <div class="grid-33-item"></div>
      </div>
      <div class="grid-33-col">
        <div class="grid-33-item">CM</div>
      </div>
       <div class="grid-33-col">
         <div class="grid-33-item">R1</div>
         <div class="grid-33-item"></div>
          <div class="grid-33-item"></div>
       </div>
    </div>
    
      <div class="grid-33-wrapper ">
      <div class="grid-33-col ">
          <div class="grid-33-item"></div>
      </div>
      <div class="grid-33-col">
        <div class="grid-33-item">CM</div>
      </div>
       <div class="grid-33-col">
         <div class="grid-33-item">R1</div>
         <div class="grid-33-item"></div>
          <div class="grid-33-item"></div>
       </div>
    </div>
 
      <div class="grid-33-wrapper ">
      <div class="grid-33-col ">
          <div...

SCSS

body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}

.grid-up-padding{
    padding: 10px 0 0 0;
}
.grid-6-col {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
   direction: rtl;
}



.grid-6-col > div {
  background-color: rgb(207,232,220);
}   








.stack-wrapper{
     display: flex;
     flex-flow: row wrap;
         align-items: center;
    justify-content: center;    
    
}
.stack-item {
  flex: 1 100%;
}

$item-height: 5em;
.grid-33-wrapper{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: $item-height*3;
}
.grid-33-col{
   flex-grow: 1;  
   
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    
}
.grid-33-item{
    flex-grow: 1;
    height: $item-height;
    line-height: $item-height;

}