Улучшаем модульную сетку
Какой бы библиотекой для модульной сетки вы не пользовались, у всех есть одна проблема - управление полем и отступом для последнего элемента <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
Новые статьи и публикации
- 2025-03-14 » SPF-запись
- 2025-03-07 » SEO на маркетплейсах: как оптимизировать карточку товара для поисковой выдачи
- 2025-02-18 » Топ-10 бесплатных нейросетей для генерации изображений: лучшие ии генераторы 2024 года
- 2025-02-11 » Критическая уязвимость в 1С-Битрикс
- 2025-02-11 » Google Search Console: руководство для начинающих вебмастеров
- 2025-02-11 » Методы измерения результативности рекламных кампаний: плюсы и минусы
- 2025-02-11 » Тренды SEO в 2025 году
- 2025-02-10 » Свой Google в локалке. Ищем иголку в стоге сена
- 2025-01-29 » SEO — это комплексная работа. Шесть главных факторов ранжирования сайтов
- 2025-01-29 » Гайд для главной страницы e-commerce сайта: как оформить, чтобы повысить конверсию
- 2025-01-20 » Krea AI выпустила бесплатную функцию преобразования изображений в 3D-объекты — их можно вращать и вписывать в фотографии
- 2025-01-19 » Отзывы на Яндекс Картах: как пройти модерацию
- 2025-01-15 » Топ-6 лучших российских нейросетей, в которых можно генерировать тексты и изображения бесплатно и без VPN
- 2025-01-14 » 15 бесплатных способов узнать, чем интересуется ваша аудитория
- 2025-01-11 » Бездепозитные бонусы в казино за регистрацию с выводом: особенности и возможности получения
- 2025-01-09 » Новая модель LAM способна выполнять задачи в Word
- 2024-12-26 » Универсальный промпт для нейросети: как выжать максимум из ChatGPT, YandexGPT, Gemini, Claude в 2025
- 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 » Интеграция с Яндекс Еда
Не было еще ни одного великого ума без примеси безумия. Аристотель |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Или напишите нам в WhatsApp
Или напишите нам в WhatsApp