Semantic Boxes

by batrasoe

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<br>
<div class="ui centered padded stackable grid">
  <div class="row">
  <div class="three wide column box">
  13
  </div>
  <div class="twelve wide column">
  <div class="ui stackable grid">
  <div class="row" id="first-row">
  <div class="three wide column box">
  1
  </div>
  <div class="three wide column box">
  2
  </div>
  <div class="three wide column box">
 3
  </div>
  <div class="three wide column box">
  4
  </div>
  <div class="three wide column box">
  5
  </div> 
  
  </div>
   <div class="row" id="second-row">
  <div class="three wide column box">
  6
  </div>
  <div class="three wide column box">
  7
  </div>
  <div class="three wide column box">
 8
  </div>
  <div class="three wide column box">
  9
  </div>
  <div class="three wide column box">
  10
  </div> 
  
  </div>
  </div>
  </div>
  
  </div>  
  
  </div>
</div>

CSS

#first-row {
  padding-bottom: 0px ;
  
} 

#second-row {
  padding-top: 0px ;
}

.box {
  border-style: double;
}