Настройка сетки динамических divs

Question

В настоящее время я пытаюсь настроить сетку с помощью моего html. Мое содержимое разрешено в загрузочном блоке .container. Этот контент представляет собой коллекцию div. Количество divs зависит от внешнего процесса. Если есть четное число div, тогда я хочу сетку 2xn. Если есть нечетное число divs, я также хочу иметь сетку, но я хочу, чтобы последний div был центрирован в своем собственном блоке. Я смог достичь этого с помощью следующего кода.

HTML

<div class="container"> 
    <div class="targetcontainer"> 
    <div class="target"> 
     <p>content goes here man</p> 
    </div> 
    <div class="target"> 
     <p>content goes here man</p> 
    </div> 
    <div class="target"> 
     <p>content goes here man</p> 
    </div> 
    <div class="target"> 
     <p>content goes here man</p> 
    </div> 
    <div class="target"> 
     <p>content goes here man</p> 
    </div> 
    </div> 
</div> 

CSS

.target { 
    display: inline-block; 
    width: 47%; 
    min-width: 400px; 
    height: 265px; 
    margin: 10px 10px; 
    padding: 2%; 
    vertical-align: top; 
    background: #fff; 
    border: 1px solid #ebebeb; 
    text-decoration: none; 
    -webkit-transition: all 0.2s; 
    -moz-transition: all 0.2s; 
    -o-transition: all 0.2s; 
    -ms-transition: all 0.2s; 
    transition: all 0.2s; 
    border-bottom: 3px solid transparent; 
    cursor: pointer; 
} 

JS

function addClassToLastElement() { 
    $('.target').each(function(index, element) { 
    if ($(this).is(":last-child") && index % 2 == 0) { 
     $(this).css('display', 'block') 
     $(this).css('margin', '0 auto') 
    } 
    }) 
} 

addClassToLastElement() 

Мой JQuery код определяет, является ли THER e - нечетное число элементов. Если есть, то добавляет соответствующие свойства и центры последний div. Вы можете увидеть это here (убедитесь, что экран результатов относительно велик).

Проблема возникает, когда вы сжимаете экран. Когда есть окно, сжимайте стеки divs друг над другом, чего я хочу. Дело в том, что они не центрируются в середине экрана, за исключением последнего. Если вы изучите последний div, то я хочу, чтобы все div были представлены, когда экран сжимается до такой степени, что divs становятся стеками друг на друга. Кто-нибудь знает, как это сделать без бутстрапа и без использования jQuery's .resize()? Я только хочу, чтобы использовать один загрузочный элемент, и это .container

Answer 1

Добавить text-align: center в родительский контейнер, все .target дивы должны быть сосредоточены в настоящее время

EDIT:

/* The container itself */ 
.container{ 
    text-align: center; 
} 

/* every element, that is inside */ 
.container *{ 
    text-align: left; 
} 

EDIT 2: (с секунду контейнер)

https://jsfiddle.net/12wsn4pb/6/

Answer 2

Другой опцию- если вы маки Этот ответ будет заключаться в использовании медиа-запросов. Если ширина окна меньше 820px, примените маржу к вашим целям.

@media screen and (max-width: 820px) { 
    .target { 
     display: block; 
     margin: 0px auto; 
    } 
}