Своя сетка. Скорость прежде всего!
Немного практики и примеров – как сделать свою легкую и быструю сетку без flexbox и grid.
Почему я был против flexbox и grid до 2019 года?
Все эти технологии используют предварительные вычисления! Тоисть грузится процессор пользователя а с каждым годом на сайтах все больше видео и анимации (мои измерения) – которая в свою очередь еще больше грузит процессор + еще сетка будет – а заказчику вообще «насрать» на Вашу сетку ему главное – пользователь или клиент…
:sad: Но в 2019 году эти две технологии стали очень коректно обрабатыватся всеми браузерами!
--*--
:lol: Верстальщик запомни! Ты просто делаеш запчасть пофиг из чего она сделана. Главное в сайте это скорость (при равном контенте) – кто быстрее тот забирает трафик и клиентов…
:fellow: Хотя с каждым годом технологии ускоряют flexbox и grid в браузерах.
--*--
:tongue: Сразу о минусах.
- Высота столбцов, ровная, задается скриптом через библиотеку JQuery.
- Если в одном столбце будет изменятся высота после загрузки сайта, например при выпадении меню или баяне.... То высота в других столбцах не будет изменятся...
Где можно использовать?
- При выводе карточек товара,
- Выводе новостей в категории,
- При размещени декоративных элементов в одном блоке,
- Везде где не будет изменятся высота одного из столбцов после загрузки страницы.
Пример простой сетки:
222
222
333
444
444
444
555
Объяснения – мы через простой "float" задаем обтекание блокам и одинаковую длину в процентах. Скрипт через стиль – "column" вычисляет самый высокий блок из всех и такую же высоту задает другим блокам. Равные вертикальные отступы через паддинг для блоков.
Также для блоков нужен сброс box-sizing:
{border-style: none;display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
Код сетки:
В стилях за работу отвечает первые 2 правила.... Все что ниже за цвет для восприятия.
<div class="newblock row">
<div class="col-33 column">111</div>
<div class="col-33 column">222<br />222<br />222</div>
<div class="col-33 column">333<br />333</div>
<div class="col-33 column">444<br />444<br />444<br />444</div>
<div class="col-33 column">555<br />555</div>
<div class="col-33 column">666</div>
</div>
<style>
.newblock {
display:block; overflow:hidden; background:black; padding:10px 10px 0 10px;
border-style: none; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.newblock .col-33 {width:33.333%; float:left; margin:0 0 10px 0;}
.newblock .col-33:nth-child(1) {background:#7489c8;}
.newblock .col-33:nth-child(2) {background:#4cba8a;}
.newblock .col-33:nth-child(3) {background:#ac6b2b;}
.newblock .col-33:nth-child(4) {background:#c690b5;}
.newblock .col-33:nth-child(5) {background:#9a3816;}
.newblock .col-33:nth-child(6) {background:#a25baa;}
</style>
Код скрипта:
Скрипт должен быть после подключаемого файла jquery!
<script type="text/jаvascript"> var k = jQuery.noConflict(); function equalHeight(group) { var tallest = 0; group.each(function() { thisHeight = k(this).height(); if(thisHeight > tallest) { tallest = thisHeight; } }); group.height(tallest); }
k(document).ready(function(){
equalHeight(k(".column")); });
</script>