Grid

by Pritam Bohra

HTML

<div class="parent">
  <div class="container">
    <div class="col col-1">Col 1</div>
  </div>
  
  <div class="container">
    <div class="col col-2">Col 2</div>
  </div>
  
  <div class="container">
    <div class="col col-3">Col 3</div>
  </div>
  
  <div class="container">
    <div class="col col-4">Col 4</div>
  </div>
  
  <div class="container">
    <div class="col col-5">Col 5</div>
  </div>
  
  <div class="container">
    <div class="col col-6">Col 6</div>
  </div>
</div>

<div class="parent">
  <div class="container">
    <div class="col col-4">Col 4</div>
    <div class="col col-2">Col 2</div>
  </div>
  
</div>

CSS

.container {
  font-size: 16px;
  margin-bottom: 4px;
}

.col {
  border: 1px solid red;
  height: 40px;
  margin-top: 10px;
  float: left;
  text-align: center;
}

.col-1 {
  /* width: calc(100%/6); */
  width: 16.66%;
}

.col-2 {
  width: 33.33%;
}
.col-3 {
  width: 50%;
}

.col-4 {
  width: 66.66%;
}

.col-5 {
  width: 83.33%
}

.col-6 {
  width: 100%;
}

.container:after, .container:before {
  content: "";
  display: block;
  clear: both;
}

.parent {
  height: 100%;
  width: 100%;
}

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}