Легкая верстка блоков

Представим, что нам нужно упорядочить записи плиткой, т.е. слева направо сверху вниз. При этом, чтобы записи в каждом ряду были выровнены по левому и правому краям. Сделаем максимально простым способом.

Легкая верстка блоков

Данный способ отличается относительной легкостью реализации. Отпадает необходимость подключения скрипта для выравнивания высоты блоков, правда только в том случае если у блоков нет точных границ заливки фона или border’а. Не нужно ставить счетчик с проверкой какая по счету запись. При данной верстке легко адаптировать стили под любые устройства.

Прописываем повторяющимся блокам свойства:

.ternary {
    display: inline-block;
    position: relative;
    width: 31%;
    margin-right: 2%;
    margin-bottom: 30px;
    vertical-align: top;
}

display: inline-block; — является ключевым, т.к. он делает блоки «строчными» и складывает их один за одним слева направо сверху вниз
width: 31%; — необходимая ширина (для мобильных версий будем изменять этот параметр)
margin-right: 2%; margin-bottom: 30px; — делаем отступы только направо и вниз
vertical-align: top; — нужен для правильного выравнивания блоков по вертикали

Мы выровняли все блоки, но у правых блоков в каждом ряду есть отступ. Избавляемся от него — .ternary:nth-child(3n) {margin-right: 0;}

Принцип действия и вариации

Эффективно использовать данную верстку таким образом:

Если нам нужно выстроить блоки по 4 в ряд оборачиваем цикл в определенный класс, например .quaternion и задаем ему соответствующие параметры

.quaternion {
    display: inline-block;
    position: relative;
    width: 23%;
    margin-right: 2%;
    margin-bottom: 30px;
    vertical-align: top;
}

.quaternion:nth-child(4n) {margin-right: 0;}

Если нам нужно выстроить блоки по 3 в ряд оборачиваем цикл в определенный класс, например .ternary, задав ему соответствующие параметры и т.д.

Адаптивность

При этом так же гибко можно настроить варианты для планшета и мобильных устройств. Только для этого нужно стиль последнего элемента (:nth-child) выводить с проверкой

@media (min-width:800px) { .ternary:nth-child(3n) {margin-right: 0;} }

Чтобы при последующих медиазапросах не нужно было переназначать его.

Размеры блоков при формировании верстки плиткой

Верстка товаров Woocommerce

Убираем закрывающий тег li у товаров. И прописываем такие стили:

.woocommerce ul.products {
    border: solid #e9eaec;
    border-width: 0 0 0 1px;
    overflow: hidden;
    padding-bottom: .1rem;
	float: left;
    width: 100%;
}  

.woocommerce ul.products li.product {
    border: solid #e9eaec;
    border-width: 1px 1px 1px 0;
    box-sizing: border-box;
    background: #fff;
    padding: 5px 5px 0 5px;
    list-style: none;
    text-align: center;
    width: 25%;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin-bottom: -.1rem;
}

Если для шаблона архивов надо изменить количество товаров в ряду добавляем

.tax-product_cat.woocommerce ul.products li.product, 
.tax-product_tag.woocommerce ul.products li.product {
    width: 33.33%;
}

Это стили для вывода товаров через шорткоды

.woocommerce.columns-1 ul.products li.product {width:100%; margin-right:0}
.woocommerce.columns-2 ul.products li.product {width:48%}
.woocommerce.columns-3 ul.products li.product {width:33.33%}
.woocommerce.columns-5 ul.products li.product {width:16.95%}
.woocommerce.columns-6 ul.products li.product {width:13.5%}