Определение стилей контейнера макетов в CSS

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

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

Краткое описание контейнеров

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

body { max-width: 1170px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px;
}

Однако добавление оболочки к элементу body может оказаться непрактичным для нашей сегодняшней задачи. Элемент-оболочка может препятствовать выходу дочерних элементов за его границы. Рассмотрим следующий рисунок:

У нас есть элементы aside и main, и они расположены внутри другого элемента, который их оборачивает. Элемент .wrapper имеет, конечно, ширину.

<div class="wrapper"> <aside>...</aside> <main>...</main>
</div>

Без оболочки дочерние элементы будут примыкать к краям экрана. Это может быть очень раздражающим для пользователя, особенно на большом экране.

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

Зачем нужны контейнеры

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

Реализация оболочки в CSS

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

Добавление ширины

Первое, что нужно решить при реализации контейнера, это его ширина. Какая вам нужна ширина контейнера? Это зависит от дизайна. Вообще говоря, ширина контейнера, которая колеблется между 1000px — 1300px, является наиболее часто используемой. Популярный фреймворк Bootstrap, например, использует ширину 1170px.

.wrapper { width: 1170px;
}

Однако не рекомендуется использовать свойство width, так как оно приведет к горизонтальной прокрутке, если размер экрана меньше, чем 1170px. Вы можете решить это, добавив max-width.

.wrapper { width: 1170px; max-width: 100%;
}

Пока это работает, вы можете избавиться от width и использовать только max-width.

.wrapper { max-width: 1170px;
}

Теперь, когда мы указали ширину контейнера. Давайте перейдем к центрированию.

Центрирование контейнера

Чтобы центрировать контейнер, вам нужно добавить слева и справа auto-поля:

.wrapper { max-width: 1170px; margin: 0 auto;
}

Согласно спецификации CSS, вот как работают auto-поля:

Если ‘margin-left’ и ‘margin-right’ имеют значение ‘auto’, их используемые значения равны. Это горизонтально центрирует элемент относительно краев содержащего блока.

Я использовал margin: 0 auto, это в сбрасывает верхнее и нижнее поля на ноль и задает auto для левого и правого поля. Есть некоторые последствия использования этого, но я вернусь к ним позже. Сейчас я рекомендую использовать расширенную версию полей.

.wrapper { max-width: 1170px; margin-left: auto; margin-right: auto;
}

Добавление отступов слева и справа

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

.wrapper { max-width: 1170px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px;
}

Добавляя отступы, мы можем убедиться, что у нас будет смещение 16px с левой и правой сторон, даже если размер области просмотра меньше максимальной ширины. Отступы являются защитной стратегией, которая позволяет избежать прилипания контейнера к краям области просмотра, когда места недостаточно.

Обновление от 22 июня: использование для контейнера ширины в процентах

Я получил ответ об использовании для контейнера процентной ширины, такой как max-width: 90%, вместо padding-left и padding-right.

Хотя это работает, ширина области просмотра 90% будет слишком большой на больших экранах, вы можете переопределить ее с помощью медиа-запроса.

.wrapper { max-width: 90%; margin-left: auto; margin-right: auto;
} /* A media query for a large screen */
@media (min-width: 1170px) { .wrapper { max-width: 1170px; }
}

Используя процентную ширину, мы добавили дополнительный шаг. Мы можем легко избежать этого шага, используя фиксированное значение ширины. Другое решение, предложенное в этом твите, мы можем комбинировать width: 90% со свойством max-width: 1170px.

.wrapper { width: 90%; max-width: 1170px; margin-left: auto; margin-right: auto;
}

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

Тип display для контейнера

Поскольку контейнер является по умолчанию элементом div, это элемент уровня блока. Вопрос в том, что нам делать, если мы хотим изменить тип отображения на grid, если содержимое внутри контейнера должно быть размещено в сетке?

Ну, я не рекомендую делать это, поскольку это противоречит концепции разделения задач. Контейнер предназначен для упаковки другого содержимого, вот и все. Если вам нужна оболочка-сетка, то добавление в контейнер еще одного div с display: grid будет проще, понятнее и удобнее.

<div class="wrapper"> <!-- Content -->
</div>

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

.wrapper { display: grid; grid-template-columns: 2fr 1fr; grid-gap: 16px;
}

Лучшее решение было бы следующим:

<div class="wrapper"> <div class="featured-news"> <!-- Elements that needs to be placed in a grid --> </div>
</div>

.featured-news { display: grid; grid-template-columns: 2fr 1fr; grid-gap: 16px;
}

Обратите внимание, что я добавил отдельный элемент div для обертывания содержимого. Пожалуйста, не обращайте внимания на классы и соглашения об именах для этого примера. Мы можем предложить еще лучшее решение, используя именование классов, которое можно повторно использовать на разных страницах веб-сайта. Однако соглашения об именах CSS выходят за рамки этой статьи.

Добавление поля между контейнерами

Помните, когда я не рекомендовал использовать сокращенную версию для центрирования элемента контейнера? Я имею в виду это:

.wrapper { margin: 0 auto;
}

Хотя это работает, это может сбить с толку, когда у вас на странице есть несколько контейнеров, и вам нужно добавить интервал между ними. Если по какой-либо причине вы добавили для .wrapper другой вариант класса, добавление поля может не сработать по причинам специфичности.

.wrapper-variation { margin-top: 50px;
} .wrapper { max-width: 1170px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px;
}

margin для элемента .wrapper-variation не будет работать, потому что он переопределен margin: 0 auto. Сокращенное свойство имеет приоритет над полным. Чтобы избежать такой путаницы, рекомендуется использовать условные обозначения для таких случаев.

Теперь давайте перейдем к добавлению поля. В каждом проекте я готовлю набор служебных классов для полей и отступов и использую их по мере необходимости. Рассмотрим следующий рисунок.

<div class="wrapper mb-5"></div>
<section> <div class="wrapper"></div>
</section>
<div class="wrapper"></div>

.mb-5 { margin-bottom: 3rem !important;
}

Таким образом, CSS-оболочка остается без изменений, а интервал добавляется с помощью дополнительного служебного класса CSS. Теперь вы можете спросить, зачем мне добавлять несколько контейнеров на страницу, когда я могу добавить один? В приведенном выше HTML-коде есть элемент section между двумя контейнерами.

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

Контейнер внутри полноэкранного раздела

Могут быть случаи, когда у вас есть раздел с фоном, который растягивается на 100% ширины области просмотра, и внутри него есть контейнер. Это похоже на то, что представлено в предыдущем примере. Структура HTML страницы может быть такой:

<section> <div class="wrapper"></div>
</section>
<section> <div class="wrapper"></div>
</section>

section имеет ширину 100% окна просмотра. Вы можете добавить к нему цвет фона или изображение. Внутри него контейнер не позволяет содержимому занимать всю ширину области просмотра.

На рисунке выше раздел имеет фоновое изображение и занимает всю ширину области просмотра. Содержимое внутри ограничено шириной контейнера.

Нужен ли контейнер для Hero-раздела?

Это зависит от. Давайте рассмотрим два наиболее часто используемых дизайна Hero-раздела. В первом контент расположен по центру и ограничен определенной шириной.

Во втором содержимое распространяемое на ширину основной оболочки.

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

Hero-раздела с центрированным содержимым

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

<section class="hero"> <h2>How to make bread at home</h2> <p>....</p> <p><a href="/sign-up">Sign up</a></p>
</section>

Используя приведенный выше HTML-код, вы можете центрировать содержимое с помощью text-align:

.hero { text-align: center; }

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

Содержимое прилипает к краям

Поскольку на левой и правой сторонах нет отступов, содержимое будет прилипать к краям без надлежащего интервала. Это плохо для пользователя, так как это усложнит чтение контента.

Большая длина строки для больших экранов

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

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

<section class="hero"> <div class="hero__wrapper"> <h2>How to make bread at home</h2> <p>...</p> <p><a href="/sign-up">Sign up</a></p> </div>
</section>

Я использовал этот класс hero__wrapper, поскольку эта оболочка может быть настроена только для раздела hero, поэтому она может иметь определенную ширину, которая меньше, чем у обычного элемента оболочки.

.hero__wrapper { max-width: 720px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px;
}

Для центрирования контента можно использовать технику по вашему выбору, в зависимости от варианта применения. Для этого примера достаточно text-align: center.

Должен ли контейнер быть центрирован или выровнен по левому краю?

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

Сайт Techcrunch является примером этого. Обратите внимание, как содержимое выравнивается по левому краю на больших экранах.

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

Использование переменных CSS для вариантов контейнера

Редко, когда вам нужен контейнер только одного размера. Ширина контейнера может быть маленькой или большой, в зависимости от содержимого и варианта использования. Используя CSS-переменные, мы можем создать современную оболочку, и вы получите большую гибкость. Рассмотрим пример ниже:

<div class="wrapper"></div>

.wrapper { max-width: var(--wrapper-width, 1170px); margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px;
}

Если вы заметили, у var есть два значения: первое, если переменная —wrapper-width, и второе 1170px. Вторая переменная является резервной, что означает, что если переменная —wrapper-width не установлена, будет использоваться вторая. Что это значит? Это означает, что вы можете создать вариант оболочки, переопределив —wrapper-width, как показано ниже:

<div class="wrapper" style="--wrapper-width: 720px"></div>

Таким образом, я создал собственную оболочку без:

Если вам не нравится решение добавления встроенного стиля для переопределения переменной CSS, вы можете вместо этого добавить новый класс:

<div class="wrapper wrapper--small"></div>

.wrapper--small { --wrapper-width: 720px; /* this will override the default wrapper width. */
}

Демонстрация

Использование CSS Display: Contents

Во-первых, позвольте мне проинформировать вас о существовании этого свойства. Каждый элемент в CSS является блоком, и этот блок содержит контент, отступы, поля и границы. Используя display: contents это поле будет удалено из потока. Я могу представить это как удаление окружающих открывающих и закрывающих тегов.

<header class="site-header"> <div class="wrapper site-header__wrapper"> <!-- Header content --> </div>
</header>

.site-header__wrapper { display: flex; flex-wrap: wrap; justify-content: space-between;
}

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

.site-header__wrapper { display: contents;
} .site-header { display: flex; flex-wrap: wrap; justify-content: space-between;
}

При этом элемент .wrapper будет скрыт. Теперь при применении к элементу .site-header display: flex дочерние элементы .wrapper будут дочерними элементами .site-header.

В своей книге «Секреты CSS» Лиа Веру представила интересную технику, которую можно использовать для разделов, которые имеют гибкий фон (с полной шириной области просмотра) с оболочкой внутри. Давайте рассмотрим общий способ сделать это.

<section> <div class="wrapper"></div>
</section>

section { background-color: #ccc;
} .wrapper { max-width: 1170px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px;
}

margin-left: auto и margin-right: auto работает таким образом, что вычисляют половину ширины окна просмотра, минус ширина содержимого. То же самое можно сделать с помощью отступов.

section { padding: 1rem calc(50% - 585px);
}

Мы еще не закончили. Контент будет прикреплен к краям на мобильном экране. Решение для этого будет следующим.

section { padding: 1rem;
} @media (min-width: 1170px) { section { padding: 1rem calc(50% - 585px); }
}

Альтернативным решением было бы использовать новую функцию CSS max(). Просто мы устанавливаем минимальный отступ 1rem, и вычисление 50% — 585px может использоваться как другое значение.

section { padding: 1rem max(1rem, (50% - 585px));
}

Это все. Спасибо за прочтение.

Автор: Ahmad Shadeed

Источник: https://ishadeed.com

Редакция: Команда webformyself.