Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос нашим менторам. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Неявная сетка

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

Для рассмотрения этого вопроса используем пример с тремя элементами внутри сетки 6x6. Каждая ячейка такой секции имеет размер 30px на 30px.

Переместим первый элемент, указав ему в качестве стартовой колонки колонку номер 7. Сейчас её не существует в рамках сетки. Воспользуемся для этого псевдоклассом nth-child, который позволяет выбирать элемент по его порядковому номеру среди родственных ему элементов.

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

Рассмотрим поближе. Воспользуемся инспектором Chrome DevTools и взглянем на сетку, которая получилась в контейнере.

Сетка в Chrome DevTools

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

На этот раз переместим первый элемент на восьмой трек. Для этого так же воспользуемся свойством grid-column-start:

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

Сетка в Chrome DevTools

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

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

Неявная сетка может появиться не только после явной сетки, но и до неё. Так как полосы могут иметь не только положительные, но отрицательные значения, элемент внутри сетки можно расположить до неё. Из-за этого так же возникнет неявная сетка. Так как ячеек в сетке сейчас 6, то для создания неявной сетки до текущей необходимо расположить элемент на Grid-линии -8.

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

Сетка в Chrome DevTools

Если продолжать смещать элемент вправо, использовав значение grid-column-start: -9, то свободное пространство в неявной сетке заберёт второй элемент явной сетки.

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

Сетка в Chrome DevTools

Управление неявной сеткой

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

  • grid-auto-rows — высота трека в неявной сетке.
  • grid-auto-columns — ширина трека в неявной сетке.

В прошлом примере поставим ширину треков в неявной сетке равной 50 пикселям. Данная манипуляция никак не отразится на размерах трека явной сетки.

Если взглянуть в веб-инспектор, то будет видно, что неявные треки стали ширинов в 50 пикселей. За счёт этого и весь Grid-контейнер стал меньше, так как теперь ему не нужно занимать ширину в 100% viewport.

Сетка в Chrome DevTools

Со свойством grid-auto-rows всё обстоит немного сложнее. Новая ячейка трека не может быть ниже соседней, так как это нарушит логику работы сетки. Для наглядной демонстрации работы свойства grid-auto-rows видоизменим пример.

Используем сетку размером 2x2. В каждой ячейке будет находиться блок с различным цветом. Разместив в этой сетке пять элементов вместо четырёх, получим одну неявную Grid-полосу, которая образовалась в следствии появления неявной сетки. Отметим этот блок оранжевым цветом. Не добавив никаких правил к этому блоку, он останется невидимым. Существуя в разметке он не будет обладать высотой, так как внутри этого блока нет никаких элементов. Высота неявных полос при таком условии исходит из высоты контента внутри него. Это осуществляется благодаря значению auto свойства grid-auto-rows.

Изменим значение высоты неявных треков, установив значение в 50 пикселей.

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

Самостоятельное задание

Используя примеры из данного урока создайте следующую сетку:

  • 6 полос с шириной 50 пикселей.
  • 3 полосы с шириной 100 пикселей.

Добавьте несколько элементов до сетки и после неё. Неявная сетка будет иметь ширину полос в 100 пикселей. При неявных полосах сверху и снизу установите высоту в 50 пикселей.


<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят менторы из команды Хекслета или другие студенты.

Для полного доступа к курсу нужна профессиональная подписка

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

Получить доступ
115
курсов
892
упражнения
2241
час теории
3196
тестов

Зарегистрироваться

или войти в аккаунт

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг». Защита от спама reCAPTCHA «Конфиденциальность» и «Условия использования».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг». Защита от спама reCAPTCHA «Конфиденциальность» и «Условия использования».