jweinst1
3/26/2019 - 4:27 PM

Allows formation of a row and column approach to organizing divs in the DoM.

Allows formation of a row and column approach to organizing divs in the DoM.

gird_blocks.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
   <title>Blocks</title>
   <style>
   .row {
    clear:left;
   }
   /*Within a col, float left.*/
   .col {
     float:left;
   }

   .block {
  background:#4286f4;
  height:50px;
  width:50px;
  margin: 10px 10px 10px 10px;
         }

  .redblock {
   background:red;
  height:50px;
  width:50px;
  margin: 10px 10px 10px 10px;   
  }
         
   </style>
</head>

<body>
  <div class="row">
    <div class="col">
       <div class="block"></div>
    </div>
    <div class="col">
        <div class="block"></div>
    </div>
  </div>
  <div class="row">
    <div class="col">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
    <div class="col">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="redblock"></div>
      <div class="redblock"></div>
      <div class="redblock"></div>
      <div class="redblock"></div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="block"></div>
    </div>
    <div class="col">
      <div class="block"></div>
    </div>
    <div class="col">
      <div class="block"></div>
    </div>
    <div class="col">
      <div class="block"></div>
    </div>
  </div>
</body>
</html>