Что можно изменить в настройках сетки grid
Обновлено: 05.07.2024
Сетчатый объект — это многоцветный объект, на котором цвета могут распределяться в разных направлениях и плавно переходить от одного к другому в разных точках. При создании сетчатого объекта множество линий, так называемых линий сетки, пересекают объект, образуя решетку. С их помощью можно легко манипулировать переходами между цветами на объекте. Перемещая и редактируя узлы на линиях сетки, можно изменить интенсивность цветового сдвига или распространение цветной области на объекте.
Пересечение двух линий сетки представляет собой опорную точку особого типа — узел сетки. Узлы сетки отображаются в виде ромбов и обладают всеми свойствами опорной точки, а также дополнительным свойством — цветовой характеристикой. Можно добавлять и удалять узлы сетки, редактировать их или изменять цвет, связанный с каждым из узлов сетки.
Опорные точки также имеются в сетке (их можно отличить по квадратному значку вместо ромбовидного) и могут быть добавлены, удалены, изменены и перемещены, как и любые другие опорные точки в программе Illustrator. Опорные точки можно расположить на любой линии сетки. Можно щелкнуть опорную точку и перетащить ее управляющие линии, чтобы изменить ее.
Участок между любыми четырьмя узлами сетки называется контуром сетки. Изменять цвет контура сетки можно теми же методами, что и цвет узла сетки.
A. Линия сетки B. Контур сетки C. Узел сетки D. Опорная точка
Области сетки Grid Areas
Обратите внимание: здесь сайдбар находится наравне с футером по нижней границе.
По сути, мы видим две колонки и три ряда. Ячейка Header заняла весь первый ряд. Ячейка Sidebar растянулась на 3 и 4 ряд в первой колонке. И это поведение можно описать при помощи уже известных нам свойств grid-column и grid-row , но это плохо воспринимается визуально и вы не сразу поймете с какой раскладкой имеете дело, глядя только в код.
А можно воспользоваться инструментом Grid Area:
1). Описываем привычным способом колонки и ряды.
grid-template-columns: 200px 1fr;
grid-template-rows: 100px 1fr 100px;
3). Каждому тегу присваиваем имя области через grid-area
header
4). Для того, чтобы Footer оказался внизу, а Main занял все свободное место, следует добавить html, body
Поработать с областями сетки сюда.
Вложенные сетки
Внутри элементов сетки можно создавать вложенные сетки. То есть каждый элемент сетки может стать grid-контейнером со свойством display: grid; Пример тут.
Заключение
Теперь в ваших руках имеется мощное средство для создания адаптивных макетов веб-страниц.
VPS-хостинг с быстрыми NVMе-дисками и посуточной оплатой. Загрузка своего ISO.
Явная и неявная сетка
При создании сетки с помощью свойств grid-template-columns и grid-template-rows задаётся так называемая явная сетка. Определённая таким образом сетка имеет размеры, равные сумме всех заданных треков.
Если же количество grid-элементов превышает заданное количество ячеек, или просто элемент размещён так, что выходит за границы созданной сетки, это создаст треки неявной сетки. Размер этих треков неявной сетки будет определён по умолчанию. Мы видели эту неявную сетку в действии, когда я объявила display: grid для родительского элемента и сетка автоматически создала по одной строке для каждого grid-элемента. Я не определяла эти строки явно, но поскольку у неё были дочерние элементы, строковые треки были созданы, чтобы разместить эти элементы на сетке.
Задать размер неявных строк и колонок можно с помощью свойств grid-auto-rows или grid-auto-columns . Эти свойства принимают список треков, поэтому если вы хотите, чтобы все неявные колонки были высотой не меньше 200px и увеличивались, если того требовало содержимое, можете можете сделать следующее:
Если же нужно, чтобы размер первой неявной строки определялся автоматически исходя из содержимого, а вторая имела фиксированную высоту 100px (и так далее, поочерёдно применяя эти значения ко всем последующим строкам), то свойству можно задать несколько значений.
Фракции
Если определить три колонки, шириной 1 фракция каждая ( 1fr ), колонки будут равномерно делить ширину экрана или свободного для них пространства и занимать по 1 части каждая.
grid-template-columns: 1fr 1fr 1fr; вся доступная ширина разделилится на 3 части и каждая колонка займет одну из этих частей.
Фракции можно комбинировать с точными единицами измерения.
grid-template-columns: 200px 1fr 1fr; первая колонка займет фиксированную ширину в 200px, а две другие будут делить оставшееся пространство между собой поровну. При изменении ширины экрана, первая колонка будет также занимать 200px, а ширина колонок, заданная во фракциях, будет пересчитываться.
Проверить и потренироваться можно тут.
Сокращения для свойств CSS Grid
- place-content
- place-items
- place-self
- grid-template
- gap / grid-gap
place-content
Данное свойство является сокращением для:
place-items
Данное свойство является сокращением для:
place-self
Данное свойство является сокращением для:
grid-template
Данное свойство является сокращением для:
- grid-template-rows
- grid-template-columns
gap/grid-gap
Данное свойство является сокращением для:
Настройка проекта
Для данного проекта требуются начальные знания HTML , CSS и умение работать с VSCode (или другим редактором по вашему вкусу). Делаем следующее:
- Создаем директорию для проекта, например, Project1 и открываем ее в редакторе ( cd Project1 , code . )
- Создаем файлы index.html и style.css
- Устанавливаем в VSCode сервер для разработки ( Live Server , расширение) и запускаем его
Или вы можете просто открыть Codepen (или любую другую песочницу) и начать писать код.
Все готово, можно приступать к делу.
Создаем 3 контейнера внутри body :
Шаг 1
Шаг 2
Немного стилизуем body :
Шаг 3
Стилизуем все контейнеры:
Не волнуйтесь, мы рассмотрим каждое из указанных свойств Грида.
Шаг 4
Добавим небольшой отступ между контейнерами:
Архитектура CSS Grid
Как же Грид работает? Элементы Грида (grid items) располагаются вдоль главной или основной (main) и поперечной (cross) оси (axis). При помощи различных свойств мы можем манипулировать элементами для создания макетов.
Помимо прочего, у нас имеется возможность объединять строки и колонки подобно тому, как мы это делаем в Excel , что предоставляет нам большую гибкость, чем Флекс ( Flexbox ).
К слову, если вас интересует Флекс, вот соответствующая статья.
Создание сетчатых объектов
Можно создавать сетчатые объекты из векторных объектов, за исключением составных контуров и текстовых объектов. Нельзя создавать сетчатые объекты из связанных изображений.
Чтобы повысить производительность и скорость перерисовки, ограничивайте размеры сетчатых объектов необходимым минимумом. Обработка сложных сетчатых объектов может приводить к существенному снижению производительности. Поэтому лучше создать несколько небольших простых сетчатых объектов вместо одного сложного. При преобразовании сложных объектов используйте команду «Создать сетку» для получения наилучших результатов.
При печати сетчатых объектов плашечные цвета сохраняются для вывода в EPS, PDF и на устройства PostScript.
Заключение
Технология Grid CSS позволяет верстать любые раскладки, включая вложенность более мелких сеток в крупные.
Свойства Grid определяют размер и расположение элементов-ячеек в общей сетки, отступы между ними и выравнивание контента по горизонтали и вертикали.
При помощи технологии grid-areas, можно сделать так, что не смотря в окно браузера, а только в редактор кода, вы поймете, какой макет сверстан.
Видео урок по CSS Grid
Погодите-ка
Давайте разберемся с отношениями между родительским и дочерними элементами.
Свойства родительского элемента определяются в .container , а свойства дочерних элементов — в .box-* .
Понимание CSS Grid (1 часть): Grid-контейнер
Хотя технология CSS Grid стала поддерживаться некоторыми браузерами еще в 2017 году, у многих разработчиков пока не было возможности использовать её в своих проектах. Технология CSS Grid привносит множество новых свойств и значений. Из-за этого может казаться сложной. Однако, многие используемые в ней инструменты являются взаимозаменяемыми, а это значит, что вам не нужно изучать всю спецификацию, чтобы начать. Цель серии статей "Понимание CSS Grid" – провести читателей по пути от новичка до эксперта.
В данной начальной статье будет рассказано о том, что происходит, когда вы создаёте grid-контейнер и о различных свойствах, которые можно применять к родительскому элементу для управления сеткой. Вы узнаете, что в некоторых ситуациях достаточно только свойств, применяемых к grid-контейнеру.
В этой статье мы рассмотрим:
- Создание grid-контейнера с помощью display: grid или display: inline-grid
- Создание колонок и строк с помощью grid-template-columns и grid-template-rows
- Управление размерами неявных треков (полос / дорожек) с помощью grid-auto-columns и grid-auto-rows
Статьи из данной серии:
Примечание от переводчика
В интернете очень много как статей, так и руководств о технологии CSS Grid. Но порой в материалах Rachel Andrew доступно освещаются те моменты, которым в других руководствах уделяется недостаточно внимания.
Следовательно, данную статью стоит воспринимать лишь как ещё одну точку зрения на уже хорошо известную технологию
Автоперенос контента: свойства auto-fill и auto-fit
Избежать горизонтальный скролл и сделать, чтобы элементы переносились на новую строку с нужной шириной колонок помогут функции minmax() и repeat() и свойства auto-fill и auto-fit .
Например, сетка на 6 колонок по 200px и они не помещаются в ширину окна, возникает горизонтальная прокрутка. Задаем функцию repeat() , где повторение колонок будет автоматическим по свойству auto-fit (либо auto-fill ), а размер колонок будет регулировать функция minmax() от минимального 50px до 1fr (делить все доступное пространство на количество колонок).
auto-fill стремится поместить в строку как можно больше ячеек. Это свойство предпочитает использовать минимальную ширину для ячейки, даже если есть свободное место.
auto-fit стремится занять всё доступное пространство в строке и подстраивает ширину ячеек под это пространство.
В обоих случаях происходит перенос ячеек на новую строчку, количество колонок подстраивается под размер сетки. Но при наличии свободного пространства auto-fill использует минимальную ширину колонки, а auto-fit подстраивает ширину под свободное место. Такое поведение мы наблюдаем, когда свободного пространства много и очевидна разница в работе этих свойств. В том случае, если пространства недостаточно и происходит перенос на новую строку, разница в работе свойств становится незаметной.
Выравнивание ячеек внутри колонок и рядов
Другие значения свойства:
Тренируйтесь тут. Попробуйте добавлять больше контента в некоторые ячейки. И не забывайте заглядывать в инспектор (нажатием F12), увидите, что размеры колонок остаются неизменными.
Вид сетки в инспекторе
Функция repeat() для повторяющихся колонок и рядов
repeat() позволяет задавать количество и размер колонок без повторений в коде.
Запись grid-template-columns: 50px 200px 50px 200px; равнозначна grid-template-columns: repeat(2, 50px 200px); , размеры указаны через пробел без запятой. Означает: повторить 2 раза комбинацию колонок шириной 50 и 200px. Посмотрим на результат:
Неявная сетка
Разберем примеры явной и неявной сеток.
Получаем 2 ряда по 100px, как было указано, и ещё один ряд контента, который не поместился и был автоматически перенесен в третий ряд без фиксированной высоты.
Явная сетка в данном случае будет та, которую мы обозначили свойствами grid-template-columns: 200px 200px 200px; и grid-template-rows: 100px 100px;
Потренируйтесь работать со свойствами тут. Попробуйте сами убрать свойство автозаполнения и для колонок: grid-auto-columns и обратите внимание, как ведут себя ячейки при наличии grid-auto-flow: column;
Полное визуальное руководство/шпаргалка по CSS Grid
Сегодня мы с вами рассмотрим свойства CSS Grid (далее также — Грид), позволяющие создавать адаптивные или отзывчивые макеты веб-страниц. Я постараюсь кратко, но полно объяснить, как работает каждое свойство.
Колонки и строки
Чтобы получить что-то похожее на сетку, нужно добавить колонки и строки. Они создаются с помощью свойств grid-template-columns и grid-template-rows . Эти свойства определяются в спецификации как принимающие значение, называемое "track-list" (список треков).
Эти свойства позволяют задать треки сетки с помощью имён линий и функций размера, разделённых пробелами. Свойство grid-template-columns позволяет задать колоночные треки, а свойство grid-template-rows – строковые.
Вот некоторые допустимые значения списка треков:
- grid-template-columns: 100px 100px 200px – создаёт трёхколоночную сетку. Первая колонка равняется 100px, вторая – 100px, третья – 200px
- grid-template-columns: min-content max-content fit-content(10em) – создаёт трёхколоночную сетку. Первая колонка имеет размер min-content , вторая – max-content . третья колонка имеет ширину max-content , если содержимое не превышает 10em, если превышает – ограничивается шириной 10em.
- grid-template-columns: 1fr 1fr 1fr – создаёт трёхколоночную сетку, используя единицу измерения fr . Доступное пространство grid-контейнера распределяется между тремя колонками.
- grid-template-columns: repeat(2, 10em 1fr) – создаёт четырёхколоночную сетку с размерами колонок 10em 1fr 10em 1fr, так как используется оператор repeat() с двумя повторениями шаблона колонок.
- grid-template-columns: repeat(auto-fill, 200px) – заполняет контейнер таким количеством колонок шириной по 200px, сколько поместится, оставляя в конце пробел, если осталось немного дополнительного места.
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) – заполняет контейнер таким количеством колонок шириной по 200px, сколько поместится, после чего распределяет оставшееся пространство между этими созданными колонками.
- grid-template-columns: [full-start] 1fr [content-start] 3fr [content-end] 1fr [full-end] – создаёт трёхколоночную сетку. Первая и третья колонки имеют ширину, равную 1 части доступного пространства, а третья – 3 частям. Линии именуются путём добавления названий линий в квадратных скобках.
Как вы можете видеть, существует множество способов указать набор треков сетки. Давайте посмотрим, как именно это всё работает, а также узнаем, в какой ситуации лучше использовать каждый из способов.
Единицы длины
Для создания треков можно использовать любые единицы измерения длины или проценты. Если сумма ширин треков меньше доступной в grid-контейнере, по умолчанию треки выстраиваются в начале контейнера, а в конце остаётся свободное место. Это происходит из-за того, что по умолчанию свойства align-content и justify-content имеют значение start . Вы можете разметить треки сетки или переместить их в конец контейнера, используя свойства выравнивания, про которые я подробно рассказывала в статье How To Align Things In CSS.
Также можно использовать ключевые слова min-content , max-content и fit-content() .
Использование min-content даст вам трек, который будет настолько маленьким, насколько это возможно, при этом не вызывая переполнение содержимым. Следовательно, при его использовании в качестве размера колонки, содержимое будет мягко переноситься в тех местах, где это возможно. Трек обретает ширину, равную самому длинному слову в колонке или наибольшему элементу фиксированного размера.
Использование max-content приведёт к тому, что содержимое вообще не будет переноситься, что может привести к переполнению.
Ключевое слово fit-content может быть использовано только вместе с передаваемым значением. Это значение становится максимумом, до которого может растягиваться данный трек. Следовательно, трек будет вести себя как при использовании max-content , растягивая содержимое, пока ширина не достигнет максимального значения, которое мы указали. А когда это произойдёт, содержимое начнёт переноситься как обычно. Таким образом, трек может быть меньше переданного значения, но никогда не будет больше него.
Узнать больше о размерах в CSS Grid и других технологиях разметки можно в моей статье How Big Is That Box? Understanding Sizing In CSS Layout.
Если в итоге у вас получились треки, которые занимают больше пространства, чем доступно в контейнере, они будут переполнять контейнер. Если используются проценты, то как и в основанной на процентах float или flex разметке, нужно будет внимательно следить за тем, чтобы сумма процентов не превышала 100, если вы хотите избежать переполнения.
Единицы измерения «fr»
CSS Grid включает метод, который может помочь сэкономить время на расчет процентов, этот метод предполагает задание ширины треков с помощью единиц измерения fr . Это не единицы длины и поэтому не могут использоваться в функции cacl() ; это гибкая единица измерения, которая рассчитывается исходя из количества доступного пространства в grid-контейнере.
Это значит, что задав список треков 1fr 1fr 1fr , доступное пространство делится на 3 и распределяется поровну между тремя колонками. Если же указать список треков 2fr 1fr 1fr , доступное пространство делится на 4, из которых 2 части отходят первой колонке, и по одной части для второй и третьей колонки.
Важно помнить о том, что по умолчанию "доступное пространство" – это не всё пространство контейнера. Если какая-то из колонок содержит элемент фиксированного размера или длинное слово, которое не может быть перенесено на новую строку, пространство под эту колонку будет выделено до того, как начнётся его распределение между всеми колонками.
В следующем примере я удалила пробелы между словами в элементе ItemThree . Из-за этого образовалась длинная непереносимая строка, поэтому распределение доступного пространства происходит только после отрисовки данного элемента.
Вы можете объединять единицы измерения fr с фиксированными размерами. Например, компонент может состоять из двух колонок с фиксированной шириной по краям и гибкой центральной областью.
Еще один пример – компонент с двумя колонками, одна из которых имеет ширину fit-content(300px) , а другая 1fr . Это полезно в ситуации, когда в первой колонке может содержаться что-то меньшее 300px, и в этом случае эта колонка займёт ровно столько пространства, сколько ей потребуется, а вторая колонка с шириной, заданной в fr займёт всё оставшееся пространство. Если же добавить что-то большее (например, изображение со свойством max-width: 100% ), первая колонка увеличится до 300px, а вторая колонка займёт остальное пространство. Использование fr совместно со свойством fit-content – это способ создавать очень гибкие компоненты сайта.
Функция repeat()
Функция repeat() при указании списка треков может избавить от необходимости снова и снова вводить одинаковые значения.
При использовании функции repeat() , значение перед запятой задаёт количество повторений для списка треков, идущих после запятой. Этот список треков может содержать множество значений.В итоге, вы можете задавать таким образом повторение определённого набора треков.
Функцию repeat() можно использовать лишь для части треков из всего набора. Например, следующая строка задает одну колонку шириной 1fr, затем три колонки по 200px и в конце еще одну шириной 1fr.
Помимо числа перед запятой, позволяющего указывать точное количество повторений шаблона, также можно использовать ключевые слова auto-fill или auto-fit . Использование одного из этих ключевых слов подразумевает, что вместо заранее определённого, ваш grid-контейнер будет заполнен таким количеством треков, сколько в него поместится.
Использование фиксированных единиц измерения длины означает, что если размер контейнера больше суммы размеров колонок, в конце будет оставаться свободное пространство. В примере выше ширина контейнера равна 500px, поэтому получается две колонки по 200px плюс свободное место в конце.
Мы также можем использовать другую grid-функцию, чтобы сделать значение минимальным, а свободное пространство чтобы распределялось между всеми колонками. Функция minmax() принимает значения минимального и максимального размера. Если задать минимум = 200px, а максимум = 1fr, мы получим столько колонок шириной 200px, сколько поместится, а благодаря значению максимума = 1fr, если осталось дополнительное пространство, оно равномерно распределится между всеми колонками.
Я упоминала два ключевых слова: auto-fill и auto-fit . Если у вас достаточно содержимого, чтобы заполнить весь первый ряд ячеек контейнера, поведение этих ключевых слова будет одинаковым. Если содержимого не хватает – поведение будет разным.
Значение auto-fill сохраняет размер колонки, даже если в ней нет содержимого.
При использовании значения auto-fit , пустые колонки схлопываются.
С помощью Firefox Grid Inspector вы можете увидеть, что колонки всё ещё здесь, но были схлопнуты, уменьшив свою ширину до 0px. Последняя линия нашей сетки – это линия 3, поскольку мы всё ещё можем поместить дополнительные два трека.
Именованные линии
В последнем примере допустимых значений для указания списка треков использовался подход с именованием линий. При использовании CSS Grid, всегда есть возможность работать с линиями через их номера. Однако, их также можно именовать. Названия линиям задаются внутри квадратных скобок. Допускается задавать несколько названий для одной линии, разделяя их пробелом. Например, в следующем списке треков всем линиям заданы два названия.
Линиям можно давать любые имена, кроме span , поскольку это зарезервированное слово, которое используется при размещении элементов на сетке.
Примечание: В следующей статье из этой серии я больше расскажу о позиционировании с использованием линий и о том, как их лучше именовать. А пока что можете почитать мою статью "Naming Things in CSS Grid Layout, чтобы лучше понять эту тему.
Функция minmax() для отзывчивых колонок
grid-template-columns: minmax(100px, 500px) 100px 100px 100px; здесь первая колонка резиновая, а остальные с фиксированным размером. При достижении минимального размера, колонка перестает уменьшаться. Если продолжать уменьшать окно, то появляется горизонтальная полоса прокрутки.
Сокращенное определение колонок и рядов с grid-template
Это свойство позволяет сокращенно описать колонки и ряды.
Синтаксис такой: описание рядов / описание колонок.
grid-template: rows / columns;
То есть, вместо двух строчек кода:
grid-template-columns: 150px 150px 150px 150px;
grid-template-rows: 100px 100px 100px;
Можно использовать одну:
grid-template: 100px 100px 100px / 150px 150px 150px 150px;
А ещё лучше не забывать про функцию repeat()
grid-template: repeat(3, 100px) / repeat(4, 150px);
Поработать со свойством сюда.
Перемещение ячеек, линии сетки
Можно перемещать ячейки по линиям и давать им команду занять место, растянуться, между определенными линиями.
Передвижение между вертикальными линиями (по колонкам)
grid-column-start свойство указывает то, с какой вертикальной линии начнется ячейка
grid-column-end свойство указывает на то, на какой вертикальной линии ячейка закончится
Например, обратимся к 1 ячейке. Сейчас она располагается между вертикальными линиями 1 и 2 (или -5 и -4). Будем стилизовать ее по селектору потомства :nth-child(1) .
.grid > div:nth-child(1) обращаемся к контейнеру .grid и далее к первому входящему в него диву > div:nth-child(1)
При помощи свойств grid-column-start: 2; и grid-column-end: 4; расположим ее между 2 и 4 линиями. Ячейка при этом займет 2 колонки.
Можно растянуть ячейку на весь первый ряд.
Для этого будем использовать обратную нумерацию для окончания: grid-column: 1 / -1;
Передвижение между горизонтальными линиями (по рядам)
Переместим ячейку 2 из предыдущего примера на первый ряд.
Стилизуем по селектору .grid > div:nth-child(2) .
У рядов, как и у колонок есть отдельные свойства для обозначения старта и финиша ячейки: grid-row-start и grid-row-end . Но можно использовать одно свойства для двух значений, указанных через косую черту grid-row . Второе значение можно не указывать, если хотим, чтобы ячейка занимала только один ряд.
Плавающие ячейки
Интересная особенность сетки заключается в том, что если у ячейки не определен ряд, то она является плавающей и свободное место рядом с ней ничто не может заполнить. Как только мы определим ряд свойством grid-row , это будет знаком для других ячеек, что есть свободное место и можно его занять.
В примере выше определен ряд для ячейки 2. Но место вокруг нее пустует. Это потому, что ячейка 1 по прежнему остается плавающей. Определим ряд для ячейки 1 и свободное место займут ячейки 3 и 4.
А тут можно вручную подвигать ячейки туда-сюда для закрепления свойств.
Схема CSS Grid
Схема содержит все возможные свойства, предоставляемые Гридом. Эти свойства делятся на:
- родительские (свойства грид-контейнера) и
- дочерние (свойства грид-элементов)
Обратите внимание: красным цветом отмечены сокращения для свойств:
К концу настоящей статьи у вас будет полное понимание того, как работает каждое из них.
Функция minmax() для отзывчивых рядов
К рядам minmax() тоже применим.
grid-template-rows: 50px minmax(50px, auto) 50px; значение auto указывает на то, что ряд будет расширяться настолько, насколько этого потребует контент.
Создание Grid-контейнера
Grid, как и Flexbox, является значением свойства display . Следовательно, чтобы сообщить браузеру, что вы хотите использовать grid-разметку, нужно использовать display: grid . Элемент, к которому применено это свойство, станет блочным, а все его дочерние элементы станут принимать участие в контексте форматирования Grid. Это значит, что они ведут себя как grid-элементы, а не как обычные блочные или строчные.
Однако, порой разница в разметке сразу может быть и не видна. Так как какие-либо строки или колонки для сетки заданы не были, получается одноколоночная сетка. В этой сетке появляется достаточное количество строк, чтобы уместились все прямые дочерние элементы, располагаемые в ней друг под другом. Визуально это выглядит как обычное расположение блочных элементов.
Разница будет видна, если присутствует какой-то текст, не обернутый в теги и расположенный непосредственно внутри grid-контейнера, поскольку этот текст будет оформлен в анонимный элемент и станет grid-элементом. Любой элемент, который обычно является строчным, таким как <span> , также станет элементом сетки, как только родительский станет grid-контейнером.
На примере ниже имеется два блочных элемента плюс строка с тегом <span> в середине текста. Мы получаем пять grid-элементов:
- Два элемента <div>
- Строка текста перед <span>
- Элемент тега <span>
- Строка текста после <span>
Если вы проверите сетку в Firefox Grid Inspector, сможете увидеть пять строковых треков, созданных для каждого элемента.
Также можно создать строчную сетку, задав display: inline-grid ; в этом случае ваш grid-контейнер станет строчным блоком. Однако, его дети всё ещё будут элементами сетки и будут вести себя так же, как элементы внутри блочного grid-контейнера. Свойство display определяет лишь внешний контекст форматирования для сетки. Именно поэтому grid-контейнер в данном случае ведёт себя точно так же, как указано выше, даже если находится рядом с другими блоками страницы.
Следующий пример содержит grid, расположенный перед строкой текста, но так как он строчный, последующий текст может отображаться рядом с ним. Строчные элементы не растягиваются на всю доступную ширину в строчном измерении так, как это делают блочные элементы.
Примечание: В будущем мы сможем лучше описывать разметку макета, используя display: block grid , чтобы создать блочный контейнер и display: inline grid для строчного. Почитать подробнее про это изменение в спецификации свойства display можно в моей статье "Digging Into The DIsplay Property: The Two Values Of Display".
Свойства грид-элементов
Шкала CSS Grid
Данная шкала показывает, как вычисляются строки и колонки при их объединении. Для этого используется два вида единиц:
На представленной ниже иллюстрации показаны начальные и конечные точки строк и колонок в одной ячейке:
При использовании функции repeat() мы может установить одинаковую ширину/высоту для колонок/строк. Пример с колонками:
Это аналогично следующему:
Небольшая заметка
При использовании единицы измерения fr , доступное пространство делится на равные части.
В данном случае доступное пространство делится на 4 равные части.
grid-columns: start/end
Данное свойство позволяет объединять колонки. Оно является сокращением для:
Мы разделили доступное пространство на 12 равных частей как по ширине, так и по высоте. 1 контейнер занимает 1 часть или фракцию. В данном случае 8 фракций остались невостребованными.
Поскольку мы говорим о свойствах дочерних элементов, имеет смысл разделить их стили:
Вернемся к шкале. Мы разбираемся с колонками — поэтому пока не обращайте внимания на строки.
Каждый класс .box-* по умолчанию имеет такой масштаб (scale):
Это можно переписать с помощью ключевого слова span :
Давайте "присвоим" 8 фракций .box-1 :
Небольшая заметка
Как мы производим вычисления? box-1 занимает 1 часть. Кроме этого, к ней добавляется еще 8 частей. И еще 1 в конце. Получается: 8 + 1 + 1 = 10.
Как использовать ключевое слово span
Считается, что использование span делает код более читаемым.
В этом случае нам просто нужно добавить к box-1 8 частей:
Это даст такой же результат.
grid-row: start/end
Данное свойство позволяет объединять строки. Оно является сокращением для:
Теперь сосредоточимся на строках:
Давайте добавим к box-1 9 частей:
Расчет выглядит так: box-1 занимает 1 часть + 9 частей + 1 часть в конце, получается 9 + 1 + 1 = 11.
Вот вариант со span :
grid-area
Сначала нам нужно настроить grid-temlate-areas , о чем мы говорили выше. После этого в дочерних классах определяются названия областей, которые используются в родительском классе:
Определяем grid-template-areas в родительском классе:
Затем определяем grid-area в дочерних классах:
justify-self
Данное свойство используется для позиционирования отдельного грид-элемента вдоль основной оси. Оно принимает 4 возможных значения:
align-self
Данное свойство используется для позиционирования отдельного грид-элемента вдоль поперечной оси. Оно принимает 4 возможных значения:
Как верстать на CSS Grid. Пошаговая инструкция с примерами
Что такое CSS Grid ?
Грид — это макет для сайта (его схема, проект).
Грид-модель позволяет размещать контент сайта (располагать его определенным образом, позиционировать). Она позволяет создавать структуры, необходимые для обеспечения отзывчивости сайтов на различных устройствах. Это означает, что сайт будет одинаково хорошо смотреться на компьютере, телефоне и планшете.
Вот простой пример макета сайта, созданного с помощью Грида.
Компьютер
Телефон
Свойства грид-контейнера
Начнем со свойств родительского элемента.
grid-template-columns
Данное свойство используется для определения количества и ширины колонок. При этом, можно определять как свойства для каждой колонки в отдельности, так и устанавливать ширину всех колонок с помощью функции repeat() .
Добавим строку в style.css :
- значения в пикселях будут точными. Ключевое слово auto означает заполнение элементом всего доступного пространства
- использование единицы fr (фракция) в repeat() означает, что все контейнеры будут иметь одинаковую ширину
grid-template-rows
Данное свойство используется для определения количества и высоты строк. При этом, можно определять как высоту каждой колонки в отдельности, так и устанавливать высоту всех строк с помощью функции repeat() .
Изменим строку в style.css :
grid-template-areas
Данное свойство используется для определения количества пространства, занимаемого ячейкой Грида (grid cell), в терминах колонок и строк, в родительском контейнере.
Это можно считать схемой макета:
Для получения результата требуется не только родительское, но и хотя бы одно дочернее свойство:
- grid-template-areas : родительское свойство, создающее схему
- grid-area : дочернее свойство, которое использует схему
Создаем схему
Применяем схему
Обратите внимание: мы вернемся к свойству grid-area , когда будем говорить о дочерних свойствах.
column-gap
Данное свойство используется для добавления отступа между колонками.
Обратите внимание: свойство column-gap используется совместно со свойством grid-template-columns .
row-gap
Данное свойство используется для добавления отступов между строками.
Обратите внимание: свойство row-gap используется совместно со свойством grid-template-rows .
justify-items
Данное свойство используется для позиционирования грид-элементов внутри грид-контейнера вдоль главной оси. Оно принимает 4 возможных значения:
Добавим еще один контейнер в HTML :
И немного изменим CSS :
align-items
Данное свойство используется для позиционирования грид-элементов внутри грид-контейера вдоль поперечной оси. Оно принимает 4 возможных значения:
justify-content
Данное свойство используется для позиционирования самого грида внутри грид-контейнера вдоль основной оси. Оно принимает 7 возможных значений:
align-content
Данное свойство используется для позиционирования самого грида внутри грид-контейнера вдоль поперечной оси. Оно принимает 7 возможных значений:
Направление контента в сетке
По умолчанию контент в сетке располагается в направлении ряда слева направо.
За направление контента отвечает свойство grid-auto-flow .
По умолчанию со значением row : размещать элементы, заполняя поочерёдно каждую строку и добавляя новые строки по мере необходимости.
Значение column : контент выстроится в направлении колонок сверху вниз. Элементы теперь будут размещаться, заполняя поочерёдно каждый столбец и добавляя новые столбцы по мере необходимости.
Обратите внимательно на расположение ячеек в сетке при grid-auto-flow: row; и grid-auto-flow: column; .
Протестировать свойство можно тут.
Основы Grid CSS: колонки, ряды, отступы
Контейнер. Во-первых, нужно создать контейнер, у нас с классом .grid , внутри которого будут находится элементы сетки, в нашем случае 9 элементов <div> . Сетка создается на контейнере и все элементы внутри него выстраиваются по заданной сетке. Просто добавляем к CSS контейнера свойство display: grid; После этого можно указывать прочие свойства Grid. Но пока не заданы другие свойства сетки, элементы выстроены вертикально друг за другом так, как они идут в html разметке.
Колонки. За колонки отвечает свойство grid-template-columns . В значении свойства указывается размер каждой колонки через пробел. Например, три колонки по 100 px каждая: grid-template-columns: 100px 100px 100px; Элементы распределятся в три колонки.
Ряды. За ряды отвечает свойство grid-template-rows . Задать высоту рядам по 100px: grid-template-rows: 100px 100px 100px;
Чтобы понять основы Grid CSS, увидеть код и результат, потренироваться, задавая разные значения свойств вручную, переходи на этот учебный пример Codepen Webcademy.
Использование авторазмещения на сетке
Создание сетки и позволение браузеру автоматически размещать на ней элементы открывает широкие возможности с точки зрения результатов, которых можно добиться. Пока что мы не рассматривали позиционирование элементов на сетке, но нередко при разработке с использованием CSS Grid его и не используют. Вместо этого просто полагаются на расположение в обычном исходном порядке: по одному элементу в каждой ячейчке.
Если вы новичок в CSS Grid, хороший способ начать его использовать – поиграть с размерами треков и посмотреть, как элементы будут размещаться в создаваемых ячейках.
Читайте также: