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

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

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

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

• Создание контейнера сетки с display: grid или display: inline-grid ,
• Настройка столбцов и строк с помощью grid-template-columns и grid-template-rows ,

• Управление размером неявных дорожек с помощью grid-auto-columns и grid-auto-rows .

• Часть 1: Создание грид-контейнера

• Часть 2: Линии сетки

• Часть 3: Области шаблона сетки

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

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

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

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

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

• Два элемента div ,
• Строка текста перед диапазоном,
• Пролет,
• Строка текста после диапазона.

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

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

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

Примечание . В будущем мы сможем лучше описывать наш макет, используя display: block grid для создания контейнера блочного уровня и display: inline grid для создания контейнера встроенного уровня. Вы можете прочитать об этом изменении в спецификации дисплея в моей статье «Изучаем свойства дисплея: два значения дисплея».

Столбцы и строки

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

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

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

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

Использование единиц длины

Вы можете использовать любые единицы длины или проценты для создания треков. Если размер дорожек в сумме меньше, чем доступно в контейнере сетки, то по умолчанию дорожки выстраиваются в начало контейнера, а свободное место уходит в конец. Это связано с тем, что значением по умолчанию для align-content и justify-content является start . Вы можете разнести дорожки сетки или переместить их в конец контейнера, используя свойства выравнивания, которые я подробно объясняю в своей статье «Как выровнять вещи в CSS».

Вы также можете использовать ключевые слова min-content , max-content и fit-content() . Использование min-content даст вам дорожку, которая настолько мала, насколько это возможно, не вызывая переполнения. Таким образом, при использовании в качестве размера столбца содержимое будет плавно переноситься везде, где это возможно. Дорожка становится размером самого длинного слова в столбце или самого большого элемента фиксированного размера.

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

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

Вы можете узнать больше о размерах в сетке и других методах компоновки в моей статье «Насколько велика эта коробка? Понимание размера в макете CSS».

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

Группа fr

Grid Layout включает в себя метод, который может избавить вас от вычисления процентов для себя — отслеживание размера с единицей fr . Эта единица измерения не является длиной, поэтому ее нельзя комбинировать с calc() ; это гибкая единица, представляющая доступное пространство в контейнере сетки.

Это означает, что с трек-листом 1fr 1fr 1fr ; доступное пространство разделено на три части и равномерно распределено между дорожками. В списке 2fr 1fr 1fr доступное пространство разделено на четыре, и две части отведены для трека один — по одной части для треков два и три.

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

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

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

У вас может быть компонент с одной дорожкой, установленной на fit-content(300px) , а другой на 1fr. Это делает компонент, который может иметь что-то меньше 300 пикселей на первой дорожке, и в этом случае он занимает только необходимое пространство, а единица fr расширяется, чтобы занять оставшееся пространство.

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

Функция повторения()

Использование repeat() в вашем трек-листе может избавить вас от ввода одного и того же значения или значений снова и снова. Например, следующие две строки совпадают:

 grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-columns: repeat(12, 1fr);

При использовании repeat() значение перед запятой — это количество повторений списка треков, следующего за запятой. Этот трек-лист может иметь несколько значений. Это означает, что вы можете повторить шаблон дорожек.

Вы можете использовать функцию repeat() для части трек-листа. Например, следующая строка даст вам дорожку 1fr, 3 дорожки по 200px и последнюю дорожку 1fr.

 grid-template-columns: 1fr repeat(3,200px) 1fr

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

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

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

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

Использование auto-fill сохранит доступный размер дорожки, даже если в нее нет содержимого.

Если вместо этого вы используете auto-fit , пустые дорожки будут свернуты:

Используя Firefox Grid Inspector, вы можете увидеть, что дорожки все еще там, но свернуты до нуля. Конечная линия нашей сетки по-прежнему является линией 3, так как мы можем разместить две дорожки.

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

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

 grid-template-columns: [main-start sidebar-start] 1fr [sidebar-end content-start] 4fr [content-end main-end]

Вы можете назвать свои линии как угодно, кроме слова span , так как это зарезервированное слово из-за того, что оно используется при размещении элементов в сетке.

Примечание . В следующей статье этой серии я расскажу больше о размещении на основе строк и о том, как используются именованные строки. А пока прочитайте мою статью «Именование объектов в CSS Grid Layout», чтобы узнать больше по этой теме.

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

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

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

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

 grid-auto-rows: minmax(200px, auto)

Если вы хотите, чтобы первая неявная строка имела автоматический размер, а вторая — min-content и т. д. (пока все элементы сетки не будут размещены), вы можете передать несколько значений:

grid-auto-rows: auto 100px

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

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

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

• Часть 1: Создание грид-контейнера
• Часть 2: Линии сетки
• Часть 3: Области шаблона сетки