title: I need some arrangement of 12 divs. I can use HTML, CSS. I will show the code and the arrangement
body: <p>I need specific arrangement of 12 divs. I'm trying but I can't. I will show our the code and the arrangement. If you can please help me.</p>
  
  <p>The arrangement of 12 divs:</p>
  
  <p><a href="https://i.stack.imgur.com/8vPJv.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8vPJv.jpg" alt="the arrangement of 12 divs"></a></p>
  
  <p>I gave them percents of width and height but it not work.
  I will show the code.</p>
  
  <p>My code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.gallery {
    width: 100%;
    height: 800px;
    padding: 0px;
    margin: 0px;
    overflow: auto;
  }
  
  .gallery div {
    border: 1px solid black;
    margin: 0px !important;
    float: left;
  }
  
  .one {
    width: 21.42%;
    height: 25% ;
    display: inline-block;
  }
  
  .two {
    width: 14.28%;
    height: 25%;
    display: inline-block;
  }
  
  .tree {
    width: 64.26%;
    height: 37.5%;
    display: inline-block;
  }
  
  .fore {
    width: 14.28%;
    height: 50%;
    display: inline-block;
  }
  
  .five {
    width: 14.28%;
    height: 75%;
    display: inline-block;
  }
  
  .six {
    width: 7.14%;
    height: 37.5%;
    display: inline-block;
  }
  
  .seven {
    width: 21.42%;
    height: 25%;
    display: inline-block;
  }
  
  .eight {
    width: 14.28%;
    height: 65.5%;
    display: inline-block;
  }
  
  .nine {
    width: 28.56%;
    height: 37.5%;
    display: inline-block;
  }
  
  .ten {
    width: 14.28%;
    height: 25%;
    display: inline-block;
  }
  
  .eleven {
    width: 28.56%;
    height: 37.5%;
    display: inline-block;
  }
  
  .twelve {
    width: 28.56%;
    height: 25%;
    display: inline-block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container gallery"&gt;
    &lt;div class="one"&gt;&lt;/div&gt;
    &lt;div class="two"&gt;&lt;/div&gt;
    &lt;div class="tree"&gt;&lt;/div&gt;
    &lt;div class="fore"&gt;&lt;/div&gt;
    &lt;div class="five"&gt;&lt;/div&gt;
    &lt;div class="six"&gt;&lt;/div&gt;
    &lt;div class="seven"&gt;&lt;/div&gt;
    &lt;div class="eight"&gt;&lt;/div&gt;
    &lt;div class="nine"&gt;&lt;/div&gt;
    &lt;div class="ten"&gt;&lt;/div&gt;
    &lt;div class="eleven"&gt;&lt;/div&gt;
    &lt;div class="twelve"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>