Как создать контейнер в css

Понимание CSS Grid (1 часть): Grid-контейнер

Понимание CSS Grid: Создание Grid-контейнера

Хотя технология CSS Grid стала поддерживаться некоторыми браузерами еще в 2017 году, у многих разработчиков пока не было возможности использовать её в своих проектах. Технология CSS Grid привносит множество новых свойств и значений. Из-за этого может казаться сложной. Однако, многие используемые в ней инструменты являются взаимозаменяемыми, а это значит, что вам не нужно изучать всю спецификацию, чтобы начать. Цель серии статей "Понимание CSS Grid" – провести читателей по пути от новичка до эксперта.

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

В этой статье мы рассмотрим:

  • Создание grid-контейнера с помощью display: grid или display: inline-grid
  • Создание колонок и строк с помощью grid-template-columns и grid-template-rows
  • Управление размерами неявных треков (полос / дорожек) с помощью grid-auto-columns и grid-auto-rows

Статьи из данной серии:

  • Часть 1: Grid-контейнер
  • Часть 2: Grid-линии
  • Часть 3: Grid-области

Примечание от переводчика
В интернете очень много как статей, так и руководств о технологии CSS Grid. Но порой в материалах Rachel Andrew доступно освещаются те моменты, которым в других руководствах уделяется недостаточно внимания.

Следовательно, данную статью стоит воспринимать лишь как ещё одну точку зрения на уже хорошо известную технологию

Создание Grid-контейнера

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

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

Разница будет видна, если присутствует какой-то текст, не обернутый в теги и расположенный непосредственно внутри grid-контейнера, поскольку этот текст будет оформлен в анонимный элемент и станет grid-элементом. Любой элемент, который обычно является строчным, таким как <span> , также станет элементом сетки, как только родительский станет grid-контейнером.

На примере ниже имеется два блочных элемента плюс строка с тегом <span> в середине текста. Мы получаем пять grid-элементов:

  • Два элемента <div>
  • Строка текста перед <span>
  • Элемент тега <span>
  • Строка текста после <span>

Если вы проверите сетку в Firefox Grid Inspector, сможете увидеть пять строковых треков, созданных для каждого элемента.

The Grid Inspector is useful to help you see how many rows have been created

Также можно создать строчную сетку, задав display: inline-grid ; в этом случае ваш grid-контейнер станет строчным блоком. Однако, его дети всё ещё будут элементами сетки и будут вести себя так же, как элементы внутри блочного grid-контейнера. Свойство display определяет лишь внешний контекст форматирования для сетки. Именно поэтому grid-контейнер в данном случае ведёт себя точно так же, как указано выше, даже если находится рядом с другими блоками страницы.

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

Примечание: В будущем мы сможем лучше описывать разметку макета, используя display: block grid , чтобы создать блочный контейнер и display: inline grid для строчного. Почитать подробнее про это изменение в спецификации свойства display можно в моей статье "Digging Into The DIsplay Property: The Two Values Of Display".

Колонки и строки

Чтобы получить что-то похожее на сетку, нужно добавить колонки и строки. Они создаются с помощью свойств grid-template-columns и grid-template-rows . Эти свойства определяются в спецификации как принимающие значение, называемое "track-list" (список треков).

Эти свойства позволяют задать треки сетки с помощью имён линий и функций размера, разделённых пробелами. Свойство grid-template-columns позволяет задать колоночные треки, а свойство grid-template-rows – строковые.

Вот некоторые допустимые значения списка треков:

  • grid-template-columns: 100px 100px 200px – создаёт трёхколоночную сетку. Первая колонка равняется 100px, вторая – 100px, третья – 200px
  • grid-template-columns: min-content max-content fit-content(10em) – создаёт трёхколоночную сетку. Первая колонка имеет размер min-content , вторая – max-content . третья колонка имеет ширину max-content , если содержимое не превышает 10em, если превышает – ограничивается шириной 10em.
  • grid-template-columns: 1fr 1fr 1fr – создаёт трёхколоночную сетку, используя единицу измерения fr . Доступное пространство grid-контейнера распределяется между тремя колонками.
  • grid-template-columns: repeat(2, 10em 1fr) – создаёт четырёхколоночную сетку с размерами колонок 10em 1fr 10em 1fr, так как используется оператор repeat() с двумя повторениями шаблона колонок.
  • grid-template-columns: repeat(auto-fill, 200px) – заполняет контейнер таким количеством колонок шириной по 200px, сколько поместится, оставляя в конце пробел, если осталось немного дополнительного места.
  • grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) – заполняет контейнер таким количеством колонок шириной по 200px, сколько поместится, после чего распределяет оставшееся пространство между этими созданными колонками.
  • grid-template-columns: [full-start] 1fr [content-start] 3fr [content-end] 1fr [full-end] – создаёт трёхколоночную сетку. Первая и третья колонки имеют ширину, равную 1 части доступного пространства, а третья – 3 частям. Линии именуются путём добавления названий линий в квадратных скобках.

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

Единицы длины

Для создания треков можно использовать любые единицы измерения длины или проценты. Если сумма ширин треков меньше доступной в grid-контейнере, по умолчанию треки выстраиваются в начале контейнера, а в конце остаётся свободное место. Это происходит из-за того, что по умолчанию свойства align-content и justify-content имеют значение start . Вы можете разметить треки сетки или переместить их в конец контейнера, используя свойства выравнивания, про которые я подробно рассказывала в статье How To Align Things In CSS.

Также можно использовать ключевые слова min-content , max-content и fit-content() .

Использование min-content даст вам трек, который будет настолько маленьким, насколько это возможно, при этом не вызывая переполнение содержимым. Следовательно, при его использовании в качестве размера колонки, содержимое будет мягко переноситься в тех местах, где это возможно. Трек обретает ширину, равную самому длинному слову в колонке или наибольшему элементу фиксированного размера.

Использование max-content приведёт к тому, что содержимое вообще не будет переноситься, что может привести к переполнению.

Ключевое слово fit-content может быть использовано только вместе с передаваемым значением. Это значение становится максимумом, до которого может растягиваться данный трек. Следовательно, трек будет вести себя как при использовании max-content , растягивая содержимое, пока ширина не достигнет максимального значения, которое мы указали. А когда это произойдёт, содержимое начнёт переноситься как обычно. Таким образом, трек может быть меньше переданного значения, но никогда не будет больше него.

Узнать больше о размерах в CSS Grid и других технологиях разметки можно в моей статье How Big Is That Box? Understanding Sizing In CSS Layout.

Если в итоге у вас получились треки, которые занимают больше пространства, чем доступно в контейнере, они будут переполнять контейнер. Если используются проценты, то как и в основанной на процентах float или flex разметке, нужно будет внимательно следить за тем, чтобы сумма процентов не превышала 100, если вы хотите избежать переполнения.

Единицы измерения «fr»

CSS Grid включает метод, который может помочь сэкономить время на расчет процентов, этот метод предполагает задание ширины треков с помощью единиц измерения fr . Это не единицы длины и поэтому не могут использоваться в функции cacl() ; это гибкая единица измерения, которая рассчитывается исходя из количества доступного пространства в grid-контейнере.

Это значит, что задав список треков 1fr 1fr 1fr , доступное пространство делится на 3 и распределяется поровну между тремя колонками. Если же указать список треков 2fr 1fr 1fr , доступное пространство делится на 4, из которых 2 части отходят первой колонке, и по одной части для второй и третьей колонки.

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

В следующем примере я удалила пробелы между словами в элементе ItemThree . Из-за этого образовалась длинная непереносимая строка, поэтому распределение доступного пространства происходит только после отрисовки данного элемента.

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

Еще один пример – компонент с двумя колонками, одна из которых имеет ширину fit-content(300px) , а другая 1fr . Это полезно в ситуации, когда в первой колонке может содержаться что-то меньшее 300px, и в этом случае эта колонка займёт ровно столько пространства, сколько ей потребуется, а вторая колонка с шириной, заданной в fr займёт всё оставшееся пространство. Если же добавить что-то большее (например, изображение со свойством max-width: 100% ), первая колонка увеличится до 300px, а вторая колонка займёт остальное пространство. Использование fr совместно со свойством fit-content – это способ создавать очень гибкие компоненты сайта.

Функция repeat()

Функция repeat() при указании списка треков может избавить от необходимости снова и снова вводить одинаковые значения.

При использовании функции repeat() , значение перед запятой задаёт количество повторений для списка треков, идущих после запятой. Этот список треков может содержать множество значений.В итоге, вы можете задавать таким образом повторение определённого набора треков.

Функцию repeat() можно использовать лишь для части треков из всего набора. Например, следующая строка задает одну колонку шириной 1fr, затем три колонки по 200px и в конце еще одну шириной 1fr.

Помимо числа перед запятой, позволяющего указывать точное количество повторений шаблона, также можно использовать ключевые слова auto-fill или auto-fit . Использование одного из этих ключевых слов подразумевает, что вместо заранее определённого, ваш grid-контейнер будет заполнен таким количеством треков, сколько в него поместится.

Использование фиксированных единиц измерения длины означает, что если размер контейнера больше суммы размеров колонок, в конце будет оставаться свободное пространство. В примере выше ширина контейнера равна 500px, поэтому получается две колонки по 200px плюс свободное место в конце.

Мы также можем использовать другую grid-функцию, чтобы сделать значение минимальным, а свободное пространство чтобы распределялось между всеми колонками. Функция minmax() принимает значения минимального и максимального размера. Если задать минимум = 200px, а максимум = 1fr, мы получим столько колонок шириной 200px, сколько поместится, а благодаря значению максимума = 1fr, если осталось дополнительное пространство, оно равномерно распределится между всеми колонками.

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

Значение auto-fill сохраняет размер колонки, даже если в ней нет содержимого.

При использовании значения auto-fit , пустые колонки схлопываются.

С помощью Firefox Grid Inspector вы можете увидеть, что колонки всё ещё здесь, но были схлопнуты, уменьшив свою ширину до 0px. Последняя линия нашей сетки – это линия 3, поскольку мы всё ещё можем поместить дополнительные два трека.

Именованные линии

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

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

Примечание: В следующей статье из этой серии я больше расскажу о позиционировании с использованием линий и о том, как их лучше именовать. А пока что можете почитать мою статью "Naming Things in CSS Grid Layout, чтобы лучше понять эту тему.

Явная и неявная сетка

При создании сетки с помощью свойств grid-template-columns и grid-template-rows задаётся так называемая явная сетка. Определённая таким образом сетка имеет размеры, равные сумме всех заданных треков.

Если же количество grid-элементов превышает заданное количество ячеек, или просто элемент размещён так, что выходит за границы созданной сетки, это создаст треки неявной сетки. Размер этих треков неявной сетки будет определён по умолчанию. Мы видели эту неявную сетку в действии, когда я объявила display: grid для родительского элемента и сетка автоматически создала по одной строке для каждого grid-элемента. Я не определяла эти строки явно, но поскольку у неё были дочерние элементы, строковые треки были созданы, чтобы разместить эти элементы на сетке.

Задать размер неявных строк и колонок можно с помощью свойств grid-auto-rows или grid-auto-columns . Эти свойства принимают список треков, поэтому если вы хотите, чтобы все неявные колонки были высотой не меньше 200px и увеличивались, если того требовало содержимое, можете можете сделать следующее:

Если же нужно, чтобы размер первой неявной строки определялся автоматически исходя из содержимого, а вторая имела фиксированную высоту 100px (и так далее, поочерёдно применяя эти значения ко всем последующим строкам), то свойству можно задать несколько значений.

Использование авторазмещения на сетке

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

Если вы новичок в CSS Grid, хороший способ начать его использовать – поиграть с размерами треков и посмотреть, как элементы будут размещаться в создаваемых ячейках.

Переполнение контейнера в CSS

Переполнение контейнера в CSS

От автора: в CSS мы можем контролировать ситуацию, когда содержимое элемента слишком велико, чтобы уместиться в контейнер. Свойство для этого – overflow, это сокращение от свойств overflow-x и overflow-y. В этой статье я познакомлю вас с этими свойствами, а затем мы вместе рассмотрим некоторые концепции и варианты использования, связанные с переполнением.

Вступление

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

Это элемент уровня блока (например: div, section) с заданной высотой через height или max-height. Под заданной высотой я подразумеваю, что элемент должен иметь содержимое (не пустой), чтобы не указывать высоту явно.

Или элемент с установленным для white-space значением nowrap.

Возможные значения

Свойство overflow может принимать следующие возможные значения: visible, hidden, scroll, auto.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Поскольку overflow &#8212; это сокращенное свойство, оно может принимать одно или два значения. Первое значение для горизонтальной оси, а второе для вертикальной.

visible

Переполнение контейнера в CSS

Значение по умолчанию, при котором содержимое может выходить за пределы родительского элемента. Это может быть установлено как:

Интересный факт, который вы должны знать, это то, что когда для одной оси установлено visible, а для другой &#8212; auto, для оси с visible вычисляется ключевое слово auto.

Согласно Mozilla Developer Network MDN: Установка для одной оси visible (по умолчанию), а для другой – auto, приводит к тому, что visible ведет себя как auto.

Например, если мы установим для элемента следующее:

Значение свойства overflow будет вычислено, как auto auto.

hidden

Переполнение контейнера в CSS

Когда содержимое длиннее, чем его родитель, оно будет обрезано. Тем не менее, содержимое можно прокручивать с помощью Javascript.

scroll

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

Переполнение контейнера в CSS

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

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

Переполнение контейнера в CSS

Обратите внимание, что на рисунке полоса прокрутки видна только в том случае, когда содержимое длиннее контейнера. Далее мы пройдемся по свойствам, которые относятся к overflow.

Overflow-X

Это отвечает за ось X или горизонтальные стороны элемента.

Overflow-Y

Это отвечает за ось Y или вертикальные стороны элемента.

Примеры использования

Простой слайдер

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

Переполнение контейнера в CSS

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

Вывести карточки в одну строку. Я буду использовать для этого flexbox.

Добавить для контейнера overflow-x.

И это работает в настольных браузерах. Однако при тестировании этого в Safari для iOS (12.4.1) прокрутка не работала. После некоторых проб и ошибок прокрутка все же заработала, когда я добавил дочерним элементам ширину. Работает без проблем в iOS (13.3).

Модальный контент

Переполнение контейнера в CSS

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

Максимальная высота для модала.

Тело модала должно занимать все доступное пространство.

Карточка с закругленными углами

Переполнение контейнера в CSS

Когда у нас есть карточка, и мы хотим, чтобы ее углы были закруглены, мы часто добавляем border-radius для верхнего и нижнего углов, как показано ниже:

Для этого может потребоваться много работы, особенно если карточка имеет другой дизайн на мобильном телефоне. Например, вместо того, чтобы размещать дочерние элементы один над другим, они будут располагаться рядом друг с другом. Для этого случая полезно использовать для контейнера overflow: hidden, а затем добавить border-radius:

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

Усечение текста

Для длинного контента мы можем обрезать текст с помощью свойства text-overflow.

Переполнение контейнера в CSS

Для элемента, который мы хотим усечь, я добавил следующее:

Это все! Обратите внимание, чтобы это работало, важно использовать overflow: hidden.

Анимация

Когда дело доходит до анимации, преимущество overflow: hidden заключается в обрезании скрытых элементов, которые можно показывать при наведении курсора. Посмотрите на рисунок ниже:

Переполнение контейнера в CSS

В CSS это будет выглядеть так:

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

Общие проблемы, связанные с переполнением

Прокрутка на мобильном устройстве

Например, когда у нас есть слайдер, недостаточно добавить overflow-x и тем ограничиться. В Chrome iOS нам нужно продолжать прокручивать и перемещать контент вручную. К счастью, есть свойство, которое может улучшить процесс прокрутки.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Это называется прокруткой на основе импульса. Согласно MDN: &#8230;содержимое продолжает прокручиваться некоторое время после завершения жеста прокрутки и удаления пальца с сенсорного экрана.

Встроенные блочные элементы

Согласно спецификации CSS: Базовая линия &#8216;inline-block&#8217; является базовой линией его последнего блока строки в нормальном потоке, если у него нет либо линейных блоков в потоке, либо если его свойство &#8216;overflow&#8217; не имеет вычисленного значения, отличного от &#8216;visible&#8217;, в этом случае базовая линия &#8212; это край нижнего блока.

Когда inline-block элемент имеет значение overflow, отличное от visible, это приведет к выравниванию нижнего края элемента на основе текстовой базовой линии его соседних элементов. Рассмотрим следующий пример.

Переполнение контейнера в CSS

Чтобы решить эту проблему, нам нужно изменить выравнивание кнопки, которая имеет overflow: hidden.

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

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

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

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

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

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

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

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

Группировка элементов дизайна оптимизирует добавления интервалов.

Разделить элементы дизайна на столбцы без оболочки довольно сложно.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *