Улучшаем модульную сетку
Какой бы библиотекой для модульной сетки вы не пользовались, у всех есть одна проблема - управление полем и отступом для последнего элемента <div>
.
Проблема
Если вы используете модульную сетку, то каждая библиотека имеет класс, например, .grid
, который определяет единичный модуль/ячейку и сопровождается кодом, похожим на следующий:
.row{ width:940px; overflow:hidden; clear:both; } .grid{ float:left; margin-right:20px; } ... .col-4{ width:220px; } ...
Очень важным моментом является факт, что каждый .grid
имеет margin-right
равный 20px. Поэтому в 16 колоночной сетке шириной 940px (4 × .col-4
) реальная ширина будет равна 960px (4 × (220px + 20px)). То есть, на 20px (или одно поле) больше, чем занимает ваш контейнер.
Формула для расчета следующая:
f = n(c) + (n-1)(g)
Где:
- f = полная строка
- n = число ячеек в строке
- c = ширина колонки
- g = ширина интервала между колонками
То есть, строка состоит из n колонок и n-1 интервалов. Нам нужно иметь на один интервал меньше, чем количество колонок. Следовательно, от одного интервала надо как-то избавляться.
Вариант решения 1
Самый простой и распространенный способ - использовать класс .last
или .end
для последнего элемента сетки в строке, чтобы удалить его поле:
В данном случае разметка будет выглядеть следующим образом:
<div class="row"> <div class="grid col-4"> <p>Одна ячейка плюс один интервал</p> </div> <div class="grid col-4"> <p>Одна ячейка плюс один интервал</p> </div> <div class="grid col-4"> <p>Одна ячейка плюс один интервал</p> </div> <div class="grid col-4 end"> <p>Одна ячейка без интервала</p> </div> </div>
Рабочее решение задачи, но разработчику нужно помнить о том, что надо добавлять специальный класс к последнему элементу в строке при построении сетки.
Другая проблема с данным решением заключается в том, что если программисту надо организовать динамический вывод, например, серии изображений в стеке, нужно скрипт должен содержать функционал типа ‘если это колонка x, то добавить класс .end
’. Конечно, вопрос не глобальный, но требующий дополнительного внимания и работы.
Вариант решения 2
Другой вариант решения является более элегантным, но использовать его можно не в каждом случае. Он применяется в библиотеке Twitter Bootstrap.
Убираем margin-right:20px;
из класса .grid
и добавляем вместо него margin-left
. Затем используем псевдо селектор :first-child
(:first-child
лучше поддерживается в браузерах, чем :last-child
). То есть, вы можете указать первый элемент div
в строке и удалить поле:
.grid:first-child{ margin:0; }
Разметка остается чистой, так как не нужно добавлять специального класса, разработчикам не нужно принимать во внимание порядок элементов. Но и в данном решении есть свои проблемы…
Самая маленькая проблема - селектор :first-child
не всегда эффективно работает. Обсуждение производительности селекторов выходит за рамки нашего урока.
Более серьезная проблема заключается в том, что метод с использованием :first-child
можно применять только для варианта с одной строкой в модуле сетки. /А для нескольких строк в модуле данный метод не подходит. Ниже объясняется, почему. Символы на схемах обозначают:
- Тильда (~) и разорванная вертикальная черта (¦) обозначают
.row
div
- Тире (-) и вертикальная черта (|) обозначают
.grid
div
- x обозначает
:first-child
- ! обозначает неверно сформированные элементы
:first-child
работает отлично в шаблонах с одной строкой в модуле. Первый элемент div
является единственнымdiv
без левого поля:
А на следующей схеме представлен случай, когда :first-child
не действует, так как есть два элемента div
, для которых нужно убирать поле слева, но первым потомком является только один. В случае наличия нескольких строк в модуле, метод не работает:
Предлагаемое решение
Идея решения заключается в том, чтобы не удалять лишнее поле, а скрывать эффект его присутствия.
Суть проблемы выражается одним предложением - строка элементов на один интервал шире, чем контейнер. Значит, нам нужно сделать наш контейнер шире на один интервал и замаскировать дополнительную ширину с помощью отрицательного значения поля равного ширине одного интервала.
Устанавливаем интервал как margin-left
для .grid
, но не удаляем ничего. Никаких псевдо-классов или специальных классов.
Мы скрываем эффект дополнительного интервала задавая контейнеру .row
ширину, равную ширине комбинации всех колонок и интервалов, а затем устанавливаем отрицательное значение margin-left
равное ширине одного интервала, оттягивая все обратно на нужные позиции и срывая эффект margin-left
для первого элемента .grid.
Наш элемент .row
, который должен быть шириной 940px, будет иметь размер 960px, чтобы исключить удаление лишнего интервала. Затем мы вытянем обратно 20px, чтобы удалить визуальный эффект присутствия ненужного интервала:
.row{ width:960px; margin-left:-20px; overflow:hidden; clear:both; } .grid{ float:left; margin-left:20px; } ... .col-4{ width:220px; } ...
Таким образом, мы можем использовать многострочную конструкцию и не нужно помнить о дополнительных классах типа .end
/.last
.
В действии данную технику можно увидеть на сайте inuit.css (используйте Firebug или другие отладочные инструменты для исследования разметки).
Формулировка
Для использования данной техники нужно иметь следующие исходные данные:
- Количество колонок в сетке
- Ширину одной колонки
- Ширину интервала
Формула достаточно проста:
.row{ width: количество_колонок * (ширина_одной_колонки + ширина_одного_интервала) px; margin-left: -ширина_одного_интервала px; overflow:hidden; clear:both; } .grid{ float:left; margin-left: ширина_одного_интервала px; }
Например, для создания сетки с 12 колонками, которые имеют ширину 50px и интервал 25px:
.row{ width:900px; margin-left:-25px; overflow:hidden; clear:both; } .grid{ float:left; margin-left:25px; }
Использование данного метода позволяет строить модульные сетки для большого количества типов шаблонов (применяя многострочные модули) без дополнительных классов (можно легко менять местами колонки).
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/S2PBcGjbXLs/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
Дураки ставят вопросы чаще, чем пытливые люди Горький Максим - (1868-1936) - русский писатель, литературный критик и публицист, общественный деятель |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.