Своя сетка. Скорость прежде всего!

Немного практики и примеров – как сделать свою легкую и быструю сетку без flexbox и grid.

Почему я против flexbox и grid?

Все эти технологии используют предварительные вычисления! Тоисть грузится процессор пользователя а с каждым годом на сайтах все больше видео и анимации (мои измерения) – которая в свою очередь еще больше грузит процессор + еще сетка будет – а заказчику вообще «насрать» на Вашу сетку ему главное – пользователь или клиент…

--*--

Верстальщик запомни! Ты просто делаеш запчасть пофиг из чего она сделана. Главное в сайте это скорость (при равном контенте) – кто быстрее тот забирает трафик и клиентов…

Хотя с каждым годом технологии ускоряют flexbox и grid в браузерах.

--*--

 Сразу о минусах.

• Высота столбцов, ровная, задается скриптом через библиотеку JQuery.
• Если в одном столбце будет изменятся высота после загрузки сайта, например при выпадении меню или баяне.... То высота в других столбцах не будет изменятся...

Где можно использовать?

• При выводе карточек товара,
• Выводе новостей в категории,
• При размещени декоративных элементов в одном блоке,
• Везде где не будет изменятся высота одного из столбцов после загрузки страницы.

Пример простой сетки:

Объяснения – мы через простой "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>

---

Оставить свой комментарий:

• Отправить комментарий