Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
Advertisement
  1. Web Design
  2. CSS Grid Layout

Небольшой совет: на всякий случай давайте названия вашим линиям CSS Grid.

by
Read Time:3 minsLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
Understanding the CSS Grid “Auto-Placement Algorithm”
How to Use Implicit Track Sizing on Your CSS Grid

Russian (Pусский) translation by Alex Bogdanov (you can also view the original English article)

В любой CSS Grid (CSS сетке) каждая линия имеет заданный номер, по которому мы можем к ней обратиться для размещения элементов сетки. Но мы также можем дать название каждой из этих линий, упрощая таким образом работу с ней и с нашей сеткой в целом. Давайте посмотрим!

CSS grid скоро будет здесь

Наиболее частая реакция на любой урок по CSS grid: "Так когда я смогу ее использовать?". И это справедливый вопрос. Факт: сетка близко и скоро она уже будет здесь.

"CSS Grid будет поддерживаться по умолчанию в Chrome и Firefox к маю 2017." – Eric Meyer

Если вы все еще с ней не знакомы, то самое время взглянуть!

Номера линий сетки

Когда мы задаем сетку, каждой линии дается номер:

Примечание: До тех пор, пока сетке не задан параметр direction: rtl; , точкой отсчета является левый верхний угол сетки, откуда сетка распространяется к правому нижнему углу.

Мы можем обращаться к этим номерам для расположения элементов сетки:

В этом примере наш элемент .item начинается со второй линии столбца и с третьей линии ряда:

Точные названия для линий CSS Grid

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

Давайте используем пример из тех, что мы используем в этой серии уроков. Вот наша стандартная разметка для сетки 3х3:

Теперь мы можем задать нашим столбцам и рядам свойства с конкретными названиями (какие бы мы ни выбрали), использую квадратные скобки:

И теперь мы можем располагать элементы, используя имена, а не номера.

Несколько подсказок:

  • Эти имена можно адаптировать под ваши нужды, так что мыслите логично и придумывайте имена, которые помогут вам узнавать и запоминать названия без проблем.
  • Стандартное номерное обозначение никуда не девается, так что вы все еще сможете им пользоваться.
  • Вы можете задать несколько названий для одной линии, например: [main-end footer-start row-5] и т.д.
  • Даже если вы дадите названия линиям сетки, вы не обязаны их использовать, так что это отличная дополнительная возможность "на всякий случай".

Неявные имена для линий CSS Grid

Когда мы целенаправленно что-то делаем, например, называем линии CSS Grid, это будет сделано прямым и конкретным путем, то есть эксплицитно. Но когда что-то присутствует, но прямо оно не обозначено, тогда оно будет задаваться имплицитно. Мы рассмотрели, как задавать имена линиям CSS Grid эксплицитно, но существуют обстоятельства, при которых нужно задавать имена линиям имплицитно.

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

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

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

Дав области название header мы автоматически даем имена для каждой из линий, ограничивающих элемент. Линии рядов вокруг элемента становятся header-start и header-end, и, таким же образом, две линии колонок становятся header-start и header-end. Это же применимо к другим областям, которые получают названия main-start, main-end, sidebar-start и так далее.

Примечание: если посмотреть на это с обратной стороны, то, задавая эксплицитные имена линиям в одном и том же формате (header-start и header-end), автоматически создается область, имеющая название header.

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

Конец

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.