title: How to format automatically in new line if more than 3 elements are present with CSS?
body: <p>I have a <code>&lt;DIV&gt;</code> where I put some elements into. The elements are in an own <code>&lt;DIV&gt;</code> each and they should be displayed in a row with a size of 3. For example, I'm loading 12 Elements, then should be the first 3 elements in the first row, second 3 elements in the second row, and so on...</p>
  
  <p>But, I don't use table or a <code>Grid-System</code>. I want to achieve this (prefer <code>CSS</code>) without huge <code>JS</code> logic. Because, if I do it like this, I just can set some elements style to <code>display: none</code> and they will disappear, while the other ones will automatically Format in the right position.</p>
  
  <p>I tried to achieve this with <code>display: inline</code>, <code>display: inline-box</code>, <code>float: left</code>, <code>float: right</code>, but everything was ruin my elements container. Here is some of my relevant Code:</p>
  
  <pre><code>        .Pic-Table-Container{
              border: 3px solid black;
              border-radius: 5px;
              position: relative;
          }
  
          .Pic-nonPreview {
              width: 236px;
              height: 136px;
              padding-top: 20px;
          }
  
          .Pic-Preview {
              width: 350px;
              height: 200px;
              padding-top: 20px;
          }
  
          .Pic-Container {    
              width: 30%;
              height: 360px;
              border: 2px solid black;
              background: white;
              text-align:center;
          }
  </code></pre>
  
  <p>Then my JS logic creates the elements like this:</p>
  
  <pre><code>tableNode.innerHTML += '&lt;div class="'+type+'"&gt;
                             &lt;div class="Pic-Container" id="Pic-Container-'+ID+'"&gt;
  
                              &lt;img onmouseover="previewMode(\'' + ID + '\')" onmouseleave="nonpreviewMode(\'' + ID + '\')" src="https://www.NOT-RELEVANT.com' + ID + '" class="Pic-nonPreview" id="' + ID + '" /&gt;
  
                              &lt;a class="hoverBoy" id="a-name-'+ID+'" OnClick="copyText(\'a-name-' + ID + '\');return false;"&gt;
                                 ' + String(Name) + '
                              &lt;/a&gt;
  
                              &lt;a class="hoverBoy" id="a-id-'+ID+'" OnClick="copyText(\'a-id-' + ID + '\');"&gt;
                                 ' + String(ID) + '
                              &lt;/a&gt;
  
                           &lt;/div&gt;
                        &lt;/div&gt;';
  </code></pre>
  
  <p>Because I think it's still not that clear, here is a Picture of my plan:</p>
  
  <p><img src="https://i.stack.imgur.com/mWin1.png" alt="enter image description here"></p>