Улучшаем модульную сетку
Какой бы библиотекой для модульной сетки вы не пользовались, у всех есть одна проблема - управление полем и отступом для последнего элемента <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-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Всегда храни верность своему начальнику - следующий, может быть еще хуже... |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.