Адаптивный веб-дизайн с использованием CSS Grid и Flexbox

Адаптивный веб-дизайн – это способ разработки веб-сайтов таким образом, чтобы они хорошо работали на различных устройствах и размерах экранов. Вместо того, чтобы создавать несколько версий сайта для разных устройств, адаптивный дизайн использует гибкие сетки и макеты, медиа-запросы и гибкие изображения, чтобы улучшить взаимодействие с пользователем на всех платформах.

Почему важен адаптивный веб-дизайн?

Поскольку все больше и больше людей во всем мире используют мобильные телефоны и планшеты для работы в Интернете, наличие адаптивного веб-сайта больше не является вариантом — это необходимость. Адаптивный дизайн повышает удобство использования, позволяя потребителям беспрепятственно получать доступ к контенту независимо от того, какое устройство они используют. Это также улучшает взаимодействие с пользователем, гарантируя, что контент визуально последователен и легко читается на всех устройствах. Это может уменьшить разочарование и стимулировать взаимодействие. Более того, адаптивный дизайн ориентирован на будущее, позволяя им адаптироваться к новым устройствам без необходимости проведения масштабных редизайнов.

Сегодня мы рассмотрим основы адаптивного веб-дизайна и сосредоточимся, в частности, на двух мощных методах CSS: Flexbox и CSS Grid. Мы покажем, как эти макеты адаптируются к экранам разных размеров, используя простой веб-сайт с красочными полями и цифрами.

Краткая история адаптивного веб-дизайна

Адаптивный веб-дизайн сильно изменился с момента появления Интернета. Медиа-запросы, которые применяют стили на основе характеристик устройства, таких как размер экрана, разрешение и ориентация. были представлены в начале 2000-х годов, Flexbox был запущен в 2012 году, а CSS Grid был принят в 2017 году. Эти инновации позволили дизайнерам создавать адаптируемые макеты на различных устройствах, обеспечивая лучший опыт для пользователей.

Создание адаптивных макетов с помощью CSS Grid и Flexbox

Теперь давайте рассмотрим несколько практических примеров, которые позволят нам увидеть, как работают Flexbox и CSS Grid.

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

Мы создадим простой макет с помощью CSS Grid.

HTML для макета в виде сетки:

    
    
    
    


    

        
1
        
2
        
3
        
4
        
5
        
6
    

HTML:

• Разметка HTML создает адаптивный контейнер (grid-container) и цветные блоки (grid-item) с разными числами и цветами фона. Метатег области просмотра позволяет масштабировать макет на разных устройствах.

CSS для макета сетки:

/* styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f0f0f0;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    padding: 20px;
}

.grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    color: #fff;
    font-size: 2em;
    border-radius: 8px;
}

CSS:

• CSS для макета сетки использует различные свойства сетки для большей отзывчивости. Дисплей: сетка; Объявление устанавливает элемент с классом Grid-Container в качестве контейнера сетки, чтобы мы могли воспользоваться всеми преимуществами, которые могут предложить сетки. Столбцы сетки-шаблона: повтор (автоматическая подгонка, minmax (100 пикселей, 1fr)); Свойство определяет структуру столбцов в сетке: оно автоматически регулирует количество столбцов в зависимости от доступного пространства, при этом каждый столбец имеет минимальную ширину 100 пикселей и максимум 1 долю (1fr) доступного пространства. Такая конструкция позволяет сетке адаптироваться к различным размерам экрана, поэтому элементы сетки не переполняются и не создают неприглядных промежутков. Зазор: 10 пикселей; Свойство применяет одинаковый интервал к элементам сетки. Наконец, мы объединяем элементы сетки с помощью display: flex; и центрируйте их содержимое с помощью justify-content: center; и выровнять элементы: по центру. Таким образом, каждый элемент хорошо организован и сбалансирован.

Пример адаптивного веб-дизайна: макет сетки

В этом макете сетки используются:

1. Динамическое количество столбцов: сетка автоматически регулирует количество столбцов в соответствии с шириной области просмотра, при этом элементы занимают минимум 100 пикселей.
2. Гибкий размер: функция автоподбора позволяет при необходимости перераспределять и переставлять блоки, придавая всему более организованный вид.
3. Медиа-запросы: хотя это и не описано здесь, поведение элементов сетки при разных размерах экрана демонстрирует концепцию медиа-запросов с использованием адаптивных свойств сетки.

Адаптивный макет Flexbox: цветовая строка

Далее давайте воспользуемся Flexbox, чтобы создать простой ряд цветных блоков.

HTML для макета Flexbox:

    
    
    
    


    

        
1
        
2
        
3
        
4
    

HTML:

• Как и в примере с сеткой, здесь HTML создает гибкий контейнер с полями гибких элементов, отображающими цветные числа.

CSS для макета Flexbox:

/* styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f5f5f5;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
    gap: 10px;
}

.flex-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    color: #fff;
    font-size: 2em;
    border-radius: 8px;
}

CSS:
Здесь CSS использует свойства Flexbox для создания адаптивного макета, который адаптируется к различным размерам экрана. Дисплей: гибкий; в .flex-контейнере предоставляет своим дочерним элементам или (гибким элементам) функциональные возможности Flexbox. Гибкая обертка: обертка; Свойство позволяет элементам размещаться на нескольких строках, если ширина контейнера превышена. Содержимое оправдания: центр; Свойство центрирует гибкие элементы вдоль главной оси, поэтому макет будет сбалансированным независимо от количества элементов. Зазор: 10 пикселей; свойство обеспечивает равномерное расстояние между элементами, улучшая общую организацию. Каждый .flex-item также является гибким контейнером, используя display: flex; чтобы обеспечить дальнейшее выравнивание его внутреннего содержимого, которое центрируется как по вертикали, так и по горизонтали, с помощью justify-content: center; и выровнять элементы: по центру;. Фиксированные размеры высоты: 100 пикселей; и ширина: 100 пикселей; обеспечивают единообразие, а сочетание этих свойств придает макету приятный вид и адаптируется к потребностям различных устройств.

Пример адаптивного веб-дизайна: макет Flexbox

Этот макет флексбокса демонстрирует несколько характеристик адаптивного дизайна.

1. Гибкая упаковка: Гибкая упаковка: wrap; Свойство заставляет блоки перемещаться на следующую строку, когда они не помещаются в строку, адаптируясь к разной ширине области просмотра.
2. Центрированные элементы: элементы остаются по центру независимо от размера экрана, что улучшает общее представление.
3. Фиксированные размеры: коробки имеют определенный размер, но они переворачиваются и корректируются в зависимости от доступного пространства, что позволяет создать адаптивный макет.

Сравнение CSS Grid и Flexbox

Когда дело доходит до дизайна макета с помощью CSS, Grid и Flexbox — отличный выбор, но они служат разным целям. CSS Grid — это двумерная система макетов, которая позволяет создавать сложные структуры сетки со строками и столбцами, что делает ее идеальной для макетов, где требуется точный контроль над обоими измерениями, например, в веб-приложениях или на информационных панелях. С другой стороны, Flexbox — это одномерная модель макета, которая лучше всего распределяет пространство по одной оси — горизонтальной или вертикальной — что делает ее идеальной для более простых макетов или небольших компонентов, таких как кнопки или навигационные меню. Хотя вы можете выбрать Grid для комплексного, структурированного макета, в котором элементы должны быть выровнены по обеим осям, Flexbox станет вашим выбором для адаптивного, гибкого макета, который должен реагировать на размер контента. В конце концов, ваш выбор должен зависеть от конкретных потребностей вашего проекта; часто использование обоих вместе, дополняя друг друга, может дать наилучшие результаты.

Заключение

С помощью CSS Grid и Flexbox вы можете создавать адаптируемые макеты, которые отлично смотрятся на любом устройстве. Эти примеры иллюстрируют, насколько простой может быть реализация динамического проектирования.

Теперь твоя очередь! Поэкспериментируйте с этими методами, измените цвета и настройки макета и убедитесь, как просто создавать веселый и адаптивный дизайн.
``
источники:
https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/css/css_grid.asp
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout
https://kinsta.com/blog/Response-web-design/#4-flexbox-layout
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/
https://blog.logrocket.com/css-flexbox-vs-css-grid/#:~:text=Для основного стиля макета, полезно при работе со строками.