Как автоматически отформатировать новую строку, если в CSS присутствует более 3 элементов?

Question

У меня есть <DIV>, куда я помещаю некоторые элементы.Элементы имеют собственный <DIV> каждый, и они должны отображаться в строке размером 3. Например, я загружаю 12 элементов, затем должны быть первые 3 элемента в первом ряду, вторые 3 элемента ввторая строка и так далее ...

Но я не использую таблицу или Grid-System.Я хочу добиться этого (предпочитаю CSS) без огромной логики JS.Потому что, если я сделаю это так, я просто смогу установить стиль некоторых элементов на display: none, и они исчезнут, в то время как другие автоматически отформатируют в правильном положении.

Я пытался добиться этого с помощью display: inline, display: inline-box, float: left, float: right, но все испортило мой контейнер с элементами.Вот некоторые из моих соответствующих кодов:

        .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;
        }

Тогда моя логика JS создает элементы вроде этого:

tableNode.innerHTML += '<div class="'+type+'">
                           <div class="Pic-Container" id="Pic-Container-'+ID+'">

                            <img onmouseover="previewMode(\'' + ID + '\')" onmouseleave="nonpreviewMode(\'' + ID + '\')" src="https://www.NOT-RELEVANT.com' + ID + '" class="Pic-nonPreview" id="' + ID + '" />

                            <a class="hoverBoy" id="a-name-'+ID+'" OnClick="copyText(\'a-name-' + ID + '\');return false;">
                               ' + String(Name) + '
                            </a>

                            <a class="hoverBoy" id="a-id-'+ID+'" OnClick="copyText(\'a-id-' + ID + '\');">
                               ' + String(ID) + '
                            </a>

                         </div>
                      </div>';

Поскольку я думаю, что это все еще не так ясно, вот изображениемой план:

Answer 1

Вы должны использовать flexbox .

.Main-Container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.Child-Elements{
  width: 33.3%;
}

Answer 2

Вы можете использовать CSS flex-box.Проверьте эту ссылку: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

Answer 3

.div-className:nth-child(3n+1){clear:left;}