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

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

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

Мы должны учитывать две вещи:

Область сетки, созданная родительским элементом с помощью display: grid;

Сам элемент, такой как div, который назначен для этой области сетки.

Предположим, у нас создана мегапростая CSS сетка следующим образом:

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

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

Узнать подробнее
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
}

Если мы разместим здесь четыре элемента сетки, вот как это будет выглядеть через Firefox DevTools:

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

Теперь давайте возьмем один из этих элементов сетки и зададим для него background-color:

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

Область сетки и элемент имеют одинаковый размер! На то есть очень конкретная причина. Это связано с тем, что значение по умолчанию для justify-items и align-items — stretch. Значение stretch буквально растягивает элемент, чтобы он заполнил всю область сетки. Но есть несколько причин, по которым элемент может не заполнить всю область сетки:

Для свойств родительского элемента сетки justify-items или align-items может быть задано значение отличное от stretch.

Для свойств элемента сетки align-self или justify-self может быть задано значение отличное от stretch.

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

Посмотрите следующий пример:

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

Кому до этого есть дело?

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

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

Автор: Chris Coyier

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

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

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

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

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

Комментарии 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