Адаптивные сетки макетов CSS без медиа-запросов

10 лучших проектов для начинающих по отработке навыков HTML и CSS Изучение

Основой для многих сайтов по-прежнему является сетка макетов, независимо от того, состоит ли она из Grid или Flexbox. В этом отрывке из книги «Раскрытие возможностей CSS: передовые методы адаптивного пользовательского интерфейса» мы увидим, как оба этих инструмента предоставляют способы создания плавно реагирующих сеток макета без медиа-запросов.

Адаптивные макеты с сеткой

Первое, пожалуй, мое любимое из всех решений из-за его универсальности и простоты использования. Используя Grid, мы можем создать адаптивный набор столбцов, которые создаются сами по мере необходимости. Мы предоставим единственное ограничение — минимальную ширину, которой могут быть столбцы, — которое выполняет двойную функцию в качестве своего рода «точки останова» перед тем, как элементы столбца разбиваются на новые строки.

Следующее видео демонстрирует поведение, которое нам нужно.

Вот все, что нужно для создания адаптивного макета сетки, где минимальный размер столбца устанавливается 30chс помощью вспомогательного пользовательского свойства. Это правило предписывает браузеру создать столько столбцов, сколько поместится, по крайней мере, по 30chширине:

grid {
  --min: 30ch;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
}

Поскольку 1frэто максимальное значение minmax(), столбцам также разрешено растягиваться, чтобы равномерно заполнить любое оставшееся пространство в строке. Таким образом, если доступное пространство равно 80chи есть два дочерних элемента сетки, каждый из них займет 40ch. Если есть трое дочерних элементов, третий будет во второй строке, так как он 80не делится поровну на минимально допустимый размер 30.

Адаптивные макеты с Flexbox

Мы можем добиться аналогичного опыта с Flexbox. Разница между решениями Flexbox и Grid заключается в том, что элементы сетки, переходящие в новую строку, не могут распространяться на несколько столбцов сетки. С помощью Flexbox мы можем направить flex-элементы на увеличение, чтобы заполнить все оставшееся дополнительное пространство, предотвращая «сироту», которая появляется с решением Grid.

В этом коде, как и в коде Grid, браузер создаст столько столбцов, сколько уместится во встроенном пространстве размером не —minменее 30ch. Если у нас есть три элемента, а третий нужно переместить в новую строку, он займет оставшееся место из-за сокращения flex, которое важно установить flex-growна 1. 1frПоэтому в большинстве случаев он ведет себя аналогично :

.flexbox-grid {
  --min: 30ch;

  display: flex;
  flex-wrap: wrap;
}

.flexbox-grid > * {
  flex: 1 1 var(--min);
}

На изображении ниже показан окончательный элемент списка с нечетным номером, охватывающий два столбца благодаря свойству flex-grow.

На изображении ниже показан окончательный элемент списка с нечетны

Примечание: в решениях Grid и Flexbox, если мы добавим gap, это пространство будет вычтено из расчета того, сколько столбцов может быть создано до добавления новых строк.

Внимательные читатели могли заметить еще одно ключевое различие между этими решениями: при использовании Grid родитель определяет поведение дочернего элемента. Для Flexbox мы устанавливаем дочернее поведение макета для дочерних элементов. Сокращенные flexнаборы по порядку, flex-grow, flex-shrinkи flex-basis.

В качестве эксперимента мы можем изменить flex-growзначение на 0и посмотреть, как элементы будут расширяться только до этого flex-basisзначения. (Поэкспериментируйте с демонстрацией CodePen ниже.) Важно придерживаться flex-shrink, 1чтобы в конечном итоге — когда доступное встроенное пространство уже, чем flex-basis— элементы все еще могли «сжиматься», поскольку это помогает предотвратить переполнение.

Это flex-basisсвойство можно дополнительно настроить для этого решения, чтобы назначить уникальные «точки останова» для разных элементов. Поскольку мы устанавливаем это значение с помощью —minпользовательского свойства, а дочерние элементы Flexbox контролируют свой собственный размер, мы можем настроить его с помощью встроенного стиля:

<li style="--min: 40ch">...</li>

Другие дочерние элементы списка в этом примере по-прежнему будут обходить его и использовать 30chбазовое правило from, но более широкий столбец эффективно меняет поведение.

Вот демонстрация CodePen этого кода в действии.

Вот еще две техники Flexbox, которые используют flex-growи flex-basisинтересным образом:

  • Flexbox Holy Albatross Хейдона Пикеринга, который разбивается на столбцы в одну строку в зависимости от общей ширины родительского контейнера.
  • Макет боковой панели Хейдона Пикеринга и Энди Белла, показывающий, как принудительно устанавливать различные точки останова на основе Flexbox для лучшего контроля переноса элементов.
Читайте также:  Что такое оперативное проектирование? Определение и лучшие практики
Оцените статью
bestprogrammer.ru
Добавить комментарий