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

Pure CSS — это бесплатная структура CSS с открытым исходным кодом. CSS Grid Layout — это метод, разработанный для двумерного расположения элементов с помощью строк и столбцов. Он состоит как из невосприимчивых, так и из адаптивных модулей. Функция адаптивного дизайна заключается в том, чтобы автоматически отображать содержимое веб-сайта при всех разрешениях и размерах экрана и предотвращать ненужное изменение размера веб-сайтов.

Классы Pure CSS Grid . В Pure Grid есть два типа классов.

• Классы сетки ( pure-g )
• Классы модулей ( чистый-u )

Чистая регулярная сетка против адаптивной сетки:
Обычная сетка:

• Неотзывчивый, но простой в использовании.
• Строка создается с помощью класса pure-g .
• Столбцы в этой строке создаются с использованием классов pure-u-* . Например, pure-u-1-4 соответствует 1/4 или 25% ширины, pure-u-2-5 соответствует 40% ширины.

Синтаксис:

<div class="pure-g">
    <div class="pure-u-1-3"> ... </div>
    <div class="pure-u-1-3"> ... </div>
    <div class="pure-u-1-3"> ... </div>
</div>

Ширина сетки будет 1/3, т.е. 33,33%, независимо от ширины экрана, и она не будет удобна для пользователя на всех типах устройств.

Отзывчивая сетка:

• Настраиваемый и удобный для мобильных устройств.
• Предопределенные классы с разным размером сетки используются с небольшой персонализацией в соответствии с потребностями пользователей.

Синтаксис:

<div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
</div>

На маленьких экранах эта сетка будет иметь ширину 100%, а на средних экранах она будет иметь ширину 33,33%.

Медиа-запросы для формирования сетки: ссылка CDN должна использоваться для доступа к мобильной адаптивной сетке Pure CSS Grid. Перед таблицами стилей для конкретного проекта используйте приведенную ниже ссылку между тегами заголовка. Чтобы сгенерировать медиа-запрос в соответствии с шириной экрана, эти ключевые слова присоединены к классам Pure gridunit (pure-u).

CDN-ссылка:

<link rel=”stylesheet” href=”https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css”>

Следующие ключевые слова используются для создания сетки.

Примечание. В классах звездочка (*) указывает ширину сетки и количество столбцов. Например, «1-2» означает, что элемент div будет занимать «1/2» или 50% от общей ширины. «em» используется вместо «px» для генерации медиа-запроса по умолчанию, чтобы он реагировал на масштабирование страницы.

Пример. В этом примере будут созданы 4 сетки шириной 100 % на экране мобильного устройства, шириной 50 % на экране среднего размера и шириной 25 % на экране настольного компьютера.

Выход:

Адаптивные изображения в сетке: в адаптивных сетках изображения также добавляются в качестве содержимого. Для поддержания отзывчивости внутри сетки добавлен класс .pure-img .

Пример:

Выход:

Ссылка: https://purecss.io/grids/#pure-responsive-grids