Убедитесь, что ваши макеты полностью адаптивны с альтернативной единицей измерения.

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

Узнайте о распространенных проблемах, с которыми вы столкнетесь при использовании процентов. Также узнайте о современных методах CSS, которые можно использовать вместо процентов. Эти методы дадут вам тот же результат, что и проценты, без каких-либо недостатков.

Очень простой пример сетки

Чтобы продемонстрировать проблему с процентными единицами, рассмотрите этот макет HTML:

<дивсорт="контейнермоя сетка">
 <дивсорт="элемент сетки">
див>
 <дивсорт="элемент сетки">
див>
див>

Внешний элемент является основным див контейнерный элемент с двумя див дети. У каждого ребенка есть

instagram viewer
элемент сетки сорт. Чтобы превратить контейнер в сетку с двумя столбцами (два поля), нам нужно применить следующий код CSS:

тело {
фоновый цвет: черный;
выравнивание элементов: центр;
выравнивание содержания: гибкий старт;
}
.my-сетка {
отображать: сетка;
сетка-шаблон-столбцы: 50% 50%;
допуск: 3бэр;
граница: 2пикс.твердыйзолото;
набивка: 1бэр;
}
.grid-элемент {
граница: 3пикс.твердыйзолото;
набивка: 10бэр 0;
фон: синий;
}

Таким образом, каждый столбец (элемент сетки) имеет золотой цвет фона. В родительском классе контейнера мы устанавливаем сетка-шаблон-столбец до 50% для каждого столбца. В результате оба блока занимают 50% общей ширины элемента-контейнера.

Вот результат:

Но есть проблемы с этим выравниванием. Во-первых, если вы решили добавить зазор к родительской сетке, дочерняя может переполниться сбоку. Например, если бы вы добавили зазор: 3px к .my-сетка block в CSS, то вот как будет выглядеть макет:

Как вы можете видеть на изображении выше, правая коробка вышла из контейнера. Иногда вы можете этого не заметить, потому что ваш зазор достаточно мал, что приводит к странной проблеме с выравниванием. Но если у вас был больший зазор, то перехлест становится вполне очевидным.

Всякий раз, когда вы используете проценты и добавляете поля или промежутки, велика вероятность возникновения подобных ошибок. Но почему возникает ошибка?

Это потому, что каждый столбец составляет 50% от родителя. В приведенном выше примере у нас есть 50% плюс 50% плюс этот зазор (3 пикселя), который выталкивает коробку из контейнера.

Обратите внимание, что эта ошибка возникает не только с 50-50. Вы можете установить первый столбец на 75%, второй столбец на 25%, и ошибка все равно будет возникать. Вот почему вам нужно чаще использовать следующее решение.

Решение с дробными значениями

Решение состоит в том, чтобы использовать дробные значения вместо процентов. Поэтому вместо того, чтобы устанавливать для первого столбца значение 75%, а для второго — 50%, вы можете установить для первого столбца значение 3fr, а для второго столбца — 1fr:

сетка-шаблон-столбцы: 3фр 1фр

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

Еще одно преимущество использования frs перед процентами или другими абсолютные единицы, такие как px или em— заключается в том, что вы можете комбинировать их с фиксированными значениями. Вот пример:

сетка-шаблон-столбцы: 1fr 10rem;

С помощью приведенного выше кода вы получите фиксированное значение, которое никогда не изменится независимо от размера экрана. Это связано с тем, что столбец справа всегда будет оставаться на 10rem, а столбец слева будет занимать оставшееся пространство (за вычетом пробела).

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

Более реалистичный пример

Давайте представим, что у вас есть страница, которая состоит из области основного контента и области (для связанных сообщений). Основная область содержимого занимает три части экрана, а боковая часть занимает оставшееся пространство за вычетом пробела:

.контейнер {
ширина: 100%;
отображать: сетка;
сетка-шаблон-столбцы: 3фр 1фр;
зазор: 1.5рем;
}
.карта {
фоновый цвет: #5А5А5А;
набивка: 10пикс.;
нижняя граница: .5рем;
}

Вот результат:

Как правило, вы перемещаете боковую панель (или в сторону) вниз (или вверх) страницы, когда экран становится слишком узким. Это означает настройку медиа-запросов, которые накладывают все друг на друга, когда область просмотра достигает определенной точки останова.

Вот как вы можете сложить все в столбец, когда область просмотра достигает 55em или меньше:

@СМИ(Максимальная ширина: 55эм) {
.контейнер {
отображать: сгибаться;
flex-направление: столбец;
 }
}

И результат будет выглядеть примерно так:

Теперь вы не хотите, чтобы каждая карта занимала ширину всего окна просмотра. Скорее карты должны отображаться бок о бок. Лучший способ добиться этого — использовать сетки CSS. Но вместо того, чтобы устанавливать фиксированные значения ширины (например, 50%) для столбца шаблона сетки, используйте повторить() функционируют следующим образом:

.sidebar-сетка {
отображать: сетка;
сетка-шаблон-столбцы: повторить(автоподгонка, мин Макс(25бэр, 1фр));
выравнивание содержимого: начинать;
зазор: 2бэр;
}

Этот CSS устанавливает минимальный размер 25rem и максимальный размер 1fr. Этот подход намного лучше, чем установка фиксированной ширины, потому что он зависит от внутреннего размера. Другими словами, он позволяет браузеру разобраться на основе доступных параметров.

Теперь, когда вы уменьшаете окно браузера до определенной ширины, поле сетки автоматически настраивается на два поля на строку.

Когда экран становится меньше, он падает до одного поля на строку. Таким образом, браузер складывает все одно поверх другого. Все это происходит при изменении размера окна. Вы можете использовать функцию браузера, например Chrome DevTools, чтобы понять, как работает этот CSS, и как изменение размера окон меняет макет.

Самое приятное то, что вам не нужен контейнерный запрос или что-то необычное, чтобы сделать элемент отзывчивым. Просто установите сетку и используйте мин Макс() установить дробные значения вместо фиксированных размеров.

Узнайте больше о сетке CSS

Если вы хотите хорошо работать с CSS, вам необходимо иметь глубокие знания CSS Grids. Сетки могут быть весьма мощными при правильном использовании. Вы можете создать практически любой макет, который хотите, используя сетки. Это делает его незаменимым инструментом в CSS.

Одна вещь, о которой следует помнить при использовании сеток CSS, — это сосредоточиться на отзывчивости. Вы также можете использовать дробный подход, чтобы избежать случаев коллизий между элементами. Не забудьте освоить сетки CSS, потому что стиль макета очень поможет вам при создании веб-сайтов.