Создание динамической сетки DIV с равными отступами в CSS

Быстрый ответ

Чтобы создать равномерно распределенные div-блоки, используйте flexbox-модель. Установите для контейнера свойство display: flex; и для дочерних элементов параметр flex: 1;. Эти настройки обеспечат равномерное использование доступного пространства:

.container {
  display: flex;
  justify-content: space-between; /* Так каждому div будет гарантировано своё пространство */
}
.child {
  flex: 1; /* Волшебство равного распределения */
}

<div class="container">
  <div class="child">Div 1</div>
  <div class="child">Div 2</div>
  <div class="child">Div 3</div>
</div>

Так, цифра 1 в значении flex: 1; соответствует росту flex, что позволяет каждому .child растягиваться и занимать равнозначную часть .container.

Применение CSS Grid для создания жидкой ширины

CSS Grid облегчает построение сложных и гибких макетов. Приведу пример создания гармоничной адаптивной компоновки с равномерным распределением:

.grid-container {
  display: grid;  /* Ведь мир не всегда линеен */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1rem;  /* Тонкое пространство, обеспечивающее дистанцию между блоками */
}

Данная компоновка прекрасно адаптируется под любой размер экрана и делает ваш дизайн отзывчивым.

Управление неугодными пробелами и проблемами совместимости

При использовании inline-block в HTML пробелы могут вызывать ненужные сдвиги. Чтобы избежать этого, особенно в Safari, сократите пробелы в HTML и задайте контейнеру свойство font-size: 0; для IE6:

.child {
  display: inline-block; /* Дружно выстроим div'ы в ряд */
  *display: inline; /* Для поддержки в старых браузерах */
  zoom: 1; /* Имитация блочного поведения */
}

Обратите внимание, запись с астериском * оптимизирует работу в IE6/7 и предотвращает ломку макета.

Стилизация div-ов с помощью избирательных CSS-селекторов

Селекторы nth-child прекрасно подходят для наложения уникальных стилей на отдельные элементы. С помощью :nth-child(odd), вы можете легко стилизовать каждый второй див:

.child:nth-child(odd) {
  background-color: #e9ecef; /* Чем больше разнообразия — тем вкуснее блюдо */
}

Будьте осмотрительны при использовании justify-content: space-between; в flex-компоновках – это отлично подходит для одного ряда, но может вызвать проблемы с многими рядами.

Визуализация

Визуальное представление жидкой ширины с равномерно распределенными DIV-блоками:

|-----🔵-----🔵-----🔵-----🔵-----🔵-----🔵-----🔵-----|

Примечание:
Каждый 🔵 символизирует DIV, настроенный таким образом, чтобы равномерно использовать доступное пространство независимо от ширины контейнера.

Этот концепт похож на бусины на нити, которые равномерно распределены и меняют свое положение в зависимости от длины нити – точно так же DIV-ы равномерно заполняют контейнер и подстраиваются под его ширину.

Делаем макет адаптивным для различных экранов с помощью адаптивного дизайна

Экраны бывают разного размера, поэтому ваш интерфейс должен быть способен корректно реагировать на изменение размеров. Медиа-запросы и функция calc() могут сделать ваши макеты действительно адаптивными:

@media (max-width: 800px) {
  .child {
    margin-right: calc(2% – 1em); /* Да, и в дизайне бывает математика */
  }
}

Несколько советов для улучшения организации

• Для удаления лишних отступов у последнего элемента используйте :nth-child.
• Препроцессоры CSS, такие как LESS или SASS, существенно облегчат обращение с медиа-запросами и сложными вычислениями.
• Если вы разрабатываете для старых версий браузеров, таких как IE9, уделите внимание функции calc() и прочим специфическим особенностям.

Полезные материалы

1. Полное руководство по Flexbox | CSS-Tricks — CSS-Tricks — детальное изучение flexbox.
2. Основные концепции flexbox — CSS: Каскадные таблицы стилей | MDN — руководство по основам flexbox от MDN.
3. CSS Flexbox (Гибкая коробка) — интерактивные уроки для практики с flexbox.
4. Полное руководство по CSS Grid | CSS-Tricks — CSS-Tricks — мастер-класс по работе с CSS Grid.
5. Лучшие, Простые Системы Сеток — Решены с помощью Flexbox — Чистый, без хаков, CSS — примеры создания сеток с использованием flexbox.
6. Шаблоны Flexbox — готовые к использованию шаблоны flexbox для вашего интерфейса.