😎 » CSS3 » css3 примеры и описание их создания » Своя сетка. Скорость прежде всего!
804 0  

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

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

Почему я был против flexbox и grid до 2019 года?

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


:sad: Но в 2019 году эти две технологии стали очень коректно обрабатыватся всеми браузерами!

--*--

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

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

--*--

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

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

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

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

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

111
222
222
222
333
333
444
444
444
444
555
555
666

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

Залишити свій коментар:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2009
2023