Соотношение сторон для элементов сетки в CSS

Соотношение сторон для элементов сетки в CSS

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

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

Вы можете использовать этот прием для сеток CSS с элементами grid! Есть несколько возможных способов применения данного метода.

Области сетки и элементы, которые для них назначены, не обязательно должны иметь одинаковые размеры

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

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Сценарий 1. Соотношение сторон задается для внутреннего элемента

Круто. Это, возможно, проще. Убедитесь на 100%, что элемент шире, чем область сетки, а затем примените псевдо-элемент для обработки растяжения высоты в соответствии с нужными пропорциями.

<div class="grid">
  <div style="--aspect-ratio: 2/1;">2/1</div>
  <div style="--aspect-ratio: 3/1;">3/1</div>
  <div style="--aspect-ratio: 1/1;">1/1</div>
</div>
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  place-items: start;
}
.grid > * {
  background: orange;
  width: 100%;
}
.grid > [style^='--aspect-ratio']::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0;
  padding-bottom: calc(100% / (var(--aspect-ratio)));
}

Что дает нам следующее:

Соотношение сторон для элементов сетки в CSS

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

Сценарий 2. Размещение нескольких столбцов необходимой ширины

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

[style="--aspect-ratio: 1/1;"] {
  grid-column: span 1;
}
[style="--aspect-ratio: 2/1;"] {
  grid-column: span 2;
}
[style="--aspect-ratio: 3/1;"] {
  grid-column: span 3;
}

Если мы еще добавим grid-auto-flow: dense;, то получим элементы с различными пропорциями, которые красиво укладываются.

Соотношение сторон для элементов сетки в CSS

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

Сценарий 3. Принудительное указание

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

.grid {
  display: grid;
  grid-template-columns: 200px 100px 100px;
  grid-template-rows: 100px 200px 300px;
}

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

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

Практический пример

Бен Гошов написал мне, пытаясь создать вот такой макет:

Соотношение сторон для элементов сетки в CSS

Проблема заключалась не только в том, чтобы для блоков сохранялось соотношение сторон, но ему также нужно было задать выравнивание внутри них. Есть несколько способов сделать это, но я бы сказал, что самый простой из них — вложенные сетки. Мы задаем для элемента display: grid; и используем возможности выравнивания этой новой внутренней сетки.

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

Автор: Chris Coyier

Источник: https://css-tricks.com/

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree