Grid with sub grid elements

by alekskorovin

HTML

<div class="container">
  <div class="row">
    <div class="grid-1-4">
      Grids 1/4
      <div class="content">
        Some content
      </div>
      <div class="row">
        <div class="grid-1-4">
          1/4
        </div>
        <div class="cont"></div>
        <div class="grid-2-4">
          2/4
        </div>
        <div class="cont"></div>
        <div class="grid-3-4">
          3/4
        </div>
        <div class="cont"></div>
        <div class="grid-4-4">
          4/4
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="grid-2-4">
      Grids 2/4
      <div class="content">
        Some content
      </div>
      <div class="row">
        <div class="grid-1-4">
          1/4
        </div><div class="cont"></div>
        <div class="grid-2-4">
          2/4
        </div><div class="cont"></div>
        <div class="grid-3-4">
          3/4
        </div><div class="cont"></div>
        <div class="grid-4-4">
          4/4
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="grid-3-4">
      Grids 3/4
      <div class="content">
        Some content
      </div>
      <div class="row">
        <div class="grid-1-4">
          1/4
        </div><div class="cont"></div>
        <div class="grid-2-4">
          2/4
        </div><div class="cont"></div>
        <div class="grid-3-4">
          3/4
        </div><div class="cont"></div>
        <div class="grid-4-4">
          4/4
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="grid-4-4">
      Grids 4/4
      <div class="content">
        Some content
      </div>
      <div class="row">
        <div class="grid-1-4">
          1/4
        </div><div class="cont"></div>
        <div class="grid-2-4">
          2/4
        </div><div class="cont"></div>
        <div class="grid-3-4">
          3/4
        </div><div class="cont"></div>
        <div class="grid-4-4">
          4/4
        </div>
   ...

CSS

[class*=grid-] {
  float: left;
  clear: none;
  background: rgba(0, 0, 0, 0.25);  
  margin: 1px 0;
  outline: dashed 2px rgba(0, 0, 0, 0.35);
  padding: 5px 0;
  text-indent: 5px;
}
[class*=grid-] [class*=grid-] {
  background: rgba(0, 0, 0, 0.45);  
}
* {
  box-sizing: border-box;
}
.content {
  overflow: hidden;
  clear: both;
}

.grid-1-4 {
  width: 25%;
}

.grid-2-4 {
  width: 50%;
}

.grid-3-4 {
  width: 75%;
}

.grid-4-4 {
  width: 100%;
}

.row {
  padding: 10px 0;
  background: lightblue;
  margin: 5px 0;
  clear: both;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}
.cont {
  clear: both;
}
// Update of child row width
.grid-1-4 .row {
  width: 400%;
}
.grid-2-4 .row {
  width: 200%;
}
.grid-3-4 .row {
  width: 133.3333%;
}
// Update of sub child row width



.container {
  width: 70%;
  margin: 0 auto;
}