Grid - аддон для рейда или группы. CSS Grid Layout. Быстрый старт GridSplitter - разделенные окна


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

  • Здоровья
  • Мана / энергия
  • Входящее лечение
  • Модуль аггро (степень угрозы)
  • Бафы / дебафы
  • Расстояние
  • Поддержка петов и транспортных средств
Интересно реализована сама подача информации в зависимости от текущего состояния.
Для ее показа можно использовать:
  • Текст в центре.
  • Иконку в центре.
  • Рамку фрейма каждого игрока.
  • Прозрачность фрейма.
  • Цветные квадратики по четырем углам.

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

Настройка аддона Grid через иконку на мини карте или используйте команду для чата /grid

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


Многие, впервые установив этот аддон и увидев какие-то непонятные серые квадратики с точками по углам, плюются и сразу сносят его обратно. Но при должной настройке может обрести любой вид на ваш вкус и имеет при этом огромные возможности.
К сожалению, в сети не так уж много упорядоченной информации по настройке. Существующие руководства в картинках могут помочь лишь слепо скопировать галочки на скринах, но не все при этом понимают, что именно они делают. Надеюсь, я смогу здесь доступно и подробно изложить, как сделать Грид функциональнее, и рассказать, какие настройки за что отвечают.
В этом гайде многабукф и минимум иллюстраций, так что утомляющимся от чтения персонам можно сразу покинуть топик:)
Дополнения Грида

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

. Дополнение из разряда must have - добавляет к фреймам полоски маны/энергии/ярости. Этого очень не хватает в обычном Гриде.

. Добавляет известные дебаффы для популярных рейдовых инстансов БК и ВОтЛК.

. Очень удобная замена стандартной индикации Грида. Позволяет показывать в каждом углу по две иконки состояний персонажа (баффы, дебаффы, недостаток жизни или маны и прочее), причем иконки представляют собой не просто квадратик определенного цвета, как в обычном Гриде, а полноценную уменьшенную иконку наложенного баффа/дебаффа. Существует также аддон - здесь можно поставить в каждый угол уже по 3 иконки. Но смотрите сами, чтобы не было переизбытка информации, в которой вы не сможете разобраться.

. Позволяет видеть, какие хоты висят на игроках рейда, чтобы правильно выбирать приоритеты лечения.

. Добавляет предустановленные виды фрейма для различных ситуаций: если вы качаетесь соло, если вы в группе из 5 человек, в рейде из 10, 25 или 40 человек, на поле боя или же арене. Для всех этих случаев можно также выбрать, должен ли Грид показывать питомцев. Например, если вы входите в героический Наксрамас, Грид у вас сразу переключится в вид для 25 человек, а если в обычный - для 10 человек.

Раньше в обязательном порядке было еще нужно дополнение GridStatusIncomigHeals, показываещее входящее в персонажа лечение, но сейчас этот модуль устарел и Грид сам умеет показывать входящий хил и рес (другие видят их при наличии у вас нужных библиотек - LibHealComm-3.0 и LibResComm-1.0). Та же ситуация с GridStatusReadyCheck (проверка рейда на готовность), автор настоятельно рекомендует убрать это дополнение, если оно установлено, так как оно теперь входит в состав ядра Грида.
Конфигурация

Чтобы включить настройки Грида, нужно кликнуть на иконку у миникарты либо напечатать в чате команду /grid config.
Грид имеет три основных раздела настроек - Расположение , Статус и Фреймы .

Кратко опишу основное назначение и возможности этих разделов.

Расположение. Здесь настраивается общий вид Грида, регулируется размер, цвет и прозрачность "подложки" общего фрейма, расстояние между фреймами и масштаб всего этого дела.

Статус. В этом разделе находятся все возможные статусы игрока, в которых он может пребывать. Что такое статус ? Это, например, имя игрока, баффы и дебафы, здоровье, мана, средство передвижения, готовность, расстояние до игрока и т.д., в общем, все, что может быть отражено на его фрейме и имеет значение. Для каждого статуса можно назначить его цвет и приоритет. Цвет будет использоваться для отображения этого статуса на фрейме, а приоритет определяет, перекроет ли этот статус другой, если они показываются в одном и том же месте.
В настройках каждого статуса есть также очевидные галочки, позволяющие показывать только наложенные вами статусы, контролировать радиус наложения статуса и его длительность и т.д.
Особо следует отметить подраздел Статус -> Ауры , где можно добавить новые баффы и дебаффы, неизвестные Гриду, которые вы хотите отслеживать.

Фреймы. В этом разделе указывается, где именно нужно показывать описанные выше статусы. Есть стандартные "знакоместа", это углы фрейма игрока, значок в центре, текст в центре, граница фрейма, цвет полосы жизни, цвет полосы маны и т.д. Различные модули для Грида могут добавлять дополнительные индикаторы. На каждый из этих индикаторов можно назначить один или несколько статусов. Например, в одном углу показывать болезни и яды, в другом различные щиты, в третьем хоты, в центре - дебафы рейда, а на полосе жизни показывать низкое хп или, например, тот же яд (при получении статуса полоса жизни окрасится в цвет, выбранный для этого состояния в разделе "Статус").
Особое значение имеет подраздел Фреймы -> Дополнительно , именно он максимально отвечает за внешний вид Грида. Здесь можно включить дополнительные индикаторы, а главное - настроить длину и ширину фреймов игроков, горизонтальное или вертикальное их отображение, размер и тип шрифта для надписей, выбрать текстуру фреймов и размеры иконок для статусов. Также здесь настраивается размер и расположение полосы маны из модуля GridManaBars , параметры иконок из модуля GridIndicatorCornerIcons и другие модули. Именно здесь можно "превратить Grid в HealBot".

Итак, грубо говоря, в разделе Статус настраивается ВИД разных баффов/дебафов на фреймах Грида, а в разделе Фреймы - РАСПОЛОЖЕНИЕ этих баффов/дебаффов на фреймах Грида.

Настройка

Здесь я опишу настройку Грида на примере своей конфигурации, предполагая, что установлены все вышеописанные дополнения. Может кому-то нравится стандартный вид Грида и устраивают стандартные возможности, но на вкус и цвет... Мне больше импонируют горизонтальные длинные зеленые панельки, как-то нагляднее они кажутся.
Нужно учесть, что у меня широкоформатный 22-дюймовый экран с разрешением 1680х1050, поэтому владельцам мониторов с отличным разрешением возможно придется изменить параметры под свое расположение Грида.

Настройка общего внешнего вида Грида

Идем в основной раздел закладки Расположение . Здесь есть группа ползунков, регулирующая размер "подложки" общего фрейма, расстояние между фреймами игроков и масштаб всего этого дела. У меня эти значения установлены в положения 1, 6 и 1 соответственно. Ниже можно установить цвет фона и цвет границы. Я сделала фон серым и прозрачным на 90%, а границу убрала вовсе, в подразделе Расположение -> Дополнительно поставив None в выпадающем списке текстур границы).
В разделе Фреймы выставляем длину текста в центре на величину побольше, чем стандартные один-три символа, так, чтобы было нормально видно имя персонажа, и устанавливаем желаемую прозрачность для полосы лечения. Также ставим галочку "Обратить цвет полос".
Далее следуем в подраздел Фреймы -> Дополнительно . Большое поле для деятельности!
Смотрим сразу в середину страницы настроек и видим два больших выпадающих списка: Ориентация текста и Ориентация фреймов . Ставим в обоих случаях "ГОРИЗОНТАЛЬНО". Выше расположен бегунок Высота фреймов , пояснять, думаю, нет необходимости. У меня этот параметр составляет 22 единицы. Ниже находится параметр Размер углов , отвечает за величину классических квадратиков по углам фрейма - 7 единиц. Далее - размер шрифта для надписей в центре. У меня он выставлен на 10, можно и больше, но тогда помещается меньше букв от статуса. И, наконец, Ширина фреймов . Выставляем удобное вам значение, для меня это 90.

В подразделе Фреймы -> Дополнительно -> Полоса маны выбираем положение полосы маны снизу (или сверху по желанию) и настраиваем ее ширину. В моем случае это 25.
Идем в подраздел Статус -> Здоровье -> Здоровье единицы . Выставляем цвет и прозрачность по вкусу, для меня это, например, зеленый, 90%. При желании можно установить галочку "Использовать цвет классов", тогда цвета всех полосок будут соответствовать стандартным цветам классов (которые также можно изменить в подразделе Цвета раздела Фреймы ).
Вот наш фрейм и приобрел более-менее подобающий вид - примерно такой:

Настройка статусов
Идем в раздел Статус .

Для начала нужно добавить отсутствующие в Гриде баффы и дебаффы, которые вы хотите видеть на фреймах. Для этого идем в раздел Статус -> Ауры и пишем название нужного баффа или дебаффа в соответствующей строке, после чего жмем Enter. В аурах появляется новый раздел с именем добавленного баффа или дебаффа, в котором можно настроить его вид.
Сильно помогает модуль GridStatusRaidDebuff , который делает за нас грязную работу по добавлению множества рейдовых дебаффов. Эти дебаффы находятся в отдельном подразделе Статус -> Дебаффы рейда .
Я для себя добавила, например, Щит Земли , Божественная защита , Ледяной взрыв (скилл Кель"Тузада, мне нужно было выделить его среди всех остальных рейдовых дебаффов, которые есть в модуле GridStatusRaidDebuff , и установить на другой индикатор) и некоторые другие.
Выставляем цвета и другие параметры для всех интересных нам статусов. Например, ядовито-зеленый для яда, фиолетовый для магических эффектов, коричневый для болезней и т.п.
При желании можно настроить изменение цвета полосы здоровья, если у персонажа мало ХП. Для этого идем в подраздел Статус -> Здоровье и выставляем значение "Порог здоровья" в подразделе Дефицит здоровья примерно на 66-90% (как удобнее), а значение "Порог здоровья" в разделе Предупреждение Мало HP примерно на 33%. В первом случае ставим желтый или оранжевый цвет, во втором - предупреждающий красный. Не забываем выставить приоритеты. Теперь, если персонажа немного побьют, его полоса жизни станет оранжевой, а когда у него останется только треть, она приобретет красный цвет.
В разделе Статус -> Расстояние определяем цвета для персонажей вокруг нас в различных радиусах. Например, можно ставить все более прозрачный зеленый цвет по мере удаления персонажа. Тогда во фрейме будет всегда видно, кто находится ближе 10 метров от нас, порой это бывает весьма важно (например, на энкаунтерах, где нельзя стоять близко друг от друга), а также позволит определить, кого не стоит и пытаться лечить по причине расстояния.
В разделе Статус - > Имя единицы можно выставить цвет, которым написано имя на фрейме, или использовать цвет класса.
Остальные статусы настройте по своему вкусу и потребностям, назначая для них цвета и приоритеты.

Настройка индикаторов

Теперь нужно настроить размеры, расположение и вид иконок и надписей. Это делается в разделе Фреймы .
В подразделе Фреймы -> Дополнительно включаем галочкой второй текстовый индикатор в центре. Включаем также индикатор "Цвет полосы здоровья" (именно он будет показывать нам алерт-цвета для низкого порога здоровья, настроенные выше).
Два ползунка ниже отвечают за иконку в центре фрейма игрока, ее размер и толщину границы. Следующие две галочки также отвечают за центральный значок. Первая - "Включено Текст множества значков". Кривой перевод, суть такова: если эта опция включена, мы видим на иконке цифру, показывающую сколько стаков баффов/дебаффов висит на данном персонаже. Например, сколько зарядов Щита Земли или сколько марок всдаников из Наксрамаса. Вторая - "Включено Фрейм перерыва (cooldown) значка". Как вы уже, наверное, догададись, отвечает за отображение кулдауна скила на центральном значке.

Значки по углам из модуля GridIndicatorCornerIcons настраиваются в подразделе Фреймы -> Дополнительно -> Icon (Corners) . Размер всех значков у меня по 10, сдвиг по оси Х -2, а по оси Y - +2. Можно поиграться размерами и расположением иконок.

Настройка отображения статусов

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

Настройка Grid

Если бы Grid был просто коллекцией строк и колонок пропорциональных размеров, от него было бы мало толку. К счастью, он не таков. Чтобы открыть полный потенциал Grid, можно изменять способы установки размеров каждой строки и колонки. Элемент Grid поддерживает следующие стратегии изменения размеров:

Абсолютные размеры

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

Автоматические размеры

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

Пропорциональные размеры

Пространство разделяется между группой строк и колонок. Это стандартная установка для всех строк и колонок.

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

Режим изменения размеров устанавливается с помощью свойства Width объекта ColumnDefinition или свойства Height объекта RowDefinition, присваивая ему некоторое число или строку. Например:

Этот синтаксис пришел из мира Интернета, где он применяется на страницах HTML с фреймами. Если вы используете смесь пропорциональной установки размеров с другими режимами, то пропорционально изменяемая строка или колонка получит все оставшееся пространство.

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

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

Легко организовать программное взаимодействие между объектами ColumnDefinition и RowDefinition. Нужно просто знать, что свойства Width и Height - это объекты типа GridLength . Чтобы создать GridLength, представляющий определенный размер, просто передайте соответствующее значение конструктору GridLength. Для создания объекта GridLength, представляющего пропорциональный размер (*), необходимо передать число конструктору GridLength и значение GridUnitType.Start в качестве второго аргумента конструктора. Для обозначения автоматического изменения размера используется статическое свойство GridLength.Auto .

Ниже представлен пример компоновки Grid с использование автоматических и пропорциональных размеров:

Всем привет. Февраль-Март 2017 года запомнились для многих, кто работает с HTML и CSS тем, что большинство браузеров выпустили обновления, среди которых были и обновления для CSS. Теперь можно использовать спецификацию CSS Grid Layout без флагов в следующих браузерах: Firefox 52 , Chrome 57 , Opera 44 , Safari 10.1 . Какой из браузеров остался позади, думаю, вы догадываетесь. Точнее он поддерживает старую версию спецификации . Но разработчики этого браузера делают все возможное , чтобы внедрить новую спецификацию. Внедрение поддержки новой CSS Grid Layout спецификации - это самое значимое событие за прошедшие пять лет. Эта спецификация поменяет полностью подход к разработке пользовательских интерфейсов. И это круто.

Я использую Flexible Box Layout

Многие задаются вопросом: «Стоп, я использую flexbox, зачем мне еще какие-то grid’ы?». Вопрос более чем уместен. CSS Grid не заменит Flexbox и наоборот. Первое отличие - это то, что Flexbox работает только в одном измерении. Из этого следует, что мы можем размещать flex элементы только вдоль главной оси или вдоль поперечной оси. Мы не можем разместить flex элементы сразу на нескольких осях. CSS Grid в свою очередь нам позволяет работать с разметкой в двухмерном пространстве и выравнивать содержимое в обоих измерениях. Мне нравится как объясняет эту разницу Tab Atkins .

Одна из самых больших проблем при разработке пользовательских интерфейсов - это то, что при изменении дизайна, функционала или поведения любого блока приходится менять его разметку (в большинстве случаев). CSS Grid позволяет менять расположение grid элементов не меняя сам HTML. Ниже пример простой разметки на Flexbox и CSS Grid.

Основные термины



Прежде чем приступать к работе с CSS Grid, нужно разобраться с основными терминами. На основе этих терминов построена вся спецификация.

Grid container - это набор пересекающихся горизонтальных и вертикальных grid линий, которые делят пространство grid контейнера на grid области, в которые могут быть помещены grid элементы. Внутри grid контейнера есть два набора grid линий: один определяет ось столбцов, другой определяет ось строк.

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

Grid track - это пространство между двумя смежными grid линиями, вертикальными или горизонтальными.

Grid cell - это наименьшая неделимая единица grid контейнера на которую можно ссылаться при позиционировании grid элементов. Образуется на пересечении grid строки и grid колонки.

Grid area - это пространство внутри grid контейнера, в которое может быть помещен один или больше grid элементов. Этот элемент может состоять из одной или более grid ячеек.

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

Первый CSS Grid макет

Мы разобрались с основными терминами. Пришло время сделать наш первый grid макет. Ничего сложного, простенький макет три строки на три колонки, чтобы разобраться с основами. Ниже вы можете увидеть пример.
В первом варианте из примера мы создаем три колонки размером 150px 1fr 150px и три строки размером 50px auto 50px соответственно. Обратите внимание на такие значения: 1fr , auto . Давайте разберемся, что это за значения.

1fr - это специальная единица измерения введенная в данной спецификации. Она не измеряется в каких-то конкретных единицах измерения (px , em , rem , др.) Из этого следует, что мы не можем использовать ее вместе с функцией calc() . Эта единица измерения не может быть меньше единицы, а также не может принимать отрицательные значения. Она рассчитывается после того, как все остальные значения, отличные от fr , были рассчитаны.

Auto - ведет себя довольно интересно и использует для расчета размеров хитрый алгоритм. В некоторых ситуациях может показаться, что эта единица измерения работает точно также как и fr . Но это не так. Главное отличие, auto будет рассчитан до того, как будет рассчитан fr . Об этом нужно помнить. Вы можете увидеть данное поведение из второго и третьего вариантов примера, который приведен выше.

Для разметки колонок и строк используются следующие правила:

Grid-template-columns: 150px 1fr auto; grid-template-rows: 50px auto 50px;
Сокращенная форма записи выглядит так:

Grid-template: 50px auto 50px / 150px 1fr auto;

Типичный шаблон на grid’ах

Давайте сделаем простенький шаблон с которым мы все знакомы. Ничего сложного, шаблон будет состоять из следующих тэгов: header , nav , aside , article , footer . Подавляющее большинство интернет ресурсов использует данный шаблон. Только знаете, даже в таком простом шаблоне наблюдается следующая проблема: «Я дизайнер, я так хочу. Я разработчик, я так не могу». С появлением CSS Grid Layout подобная проблема должна стремиться к нулю.
В данном примере мы знакомимся еще с несколькими свойствами CSS Grid Layout. Первое grid-template-areas . Оно используется для создания именованных областей grid контейнера, которые не связаны с каким-либо конкретным grid элементом. Синтаксис очень удобен, мы сразу видим какой шаблон получится на выходе. Второе свойство grid-area . Оно используется для дочернего элемента grid контейнера. Указывает в какую именованную область поместить grid элемент.

Давайте рассмотрим первый вариант grid-template-areas:

Grid-template-areas: "header header" "nav main" "footer ."
Один или больше идущих подряд символов. (точка) имеют особое значение. Если этот символ используется, то браузер его отрендерит как нулевой токен, что в свою очередь означает следующее: на его месте не будет создана именованная область grid контейнера и в нее нельзя поместить grid элемент.

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

Примеры:

minmax() - функция

Позволяет задавать минимальное и максимальное значения для ряда/колонки. Используется в свойствах, где нужно задавать размер: grid-template-rows: , grid-template-columns: , grid-template: .

Minmax(мин_значение, макс_значение)

Значение может быть:

  • px, em, rem, ... - единицы длины (100px)
  • % - проценты (10%)

    • fr - гибкие размеры. Может использоваться только для макс. значения.

    max-content - наименьший возможный размер ячейки, при котором содержимое свободно в ней умещается. Например, если в ячейке текст, идеальной шириной ячейки будет вся длина текста (в одну строку без переносов).

    min-content - наименьший размер, при котором ячейка не переполняется. Например, если в ячейке текст то ширина будет равна самому длинному слову в тексте.

    auto - зависит от того, используется оно как максимальное или минимальное значение в функции minmax() :

    • если в качестве максимума, то тоже самое что max-content .
    • если в качестве минимума, то значение будет минимальным возможным размером для ячейки. Такой размер отличается от min-content и задается свойствами min-width или min-height .

Примеры:

Варианты использования:

Grid-template-columns: minmax(100px, 200px) 1fr 1fr; grid-template-columns: minmax(200px, 50%) 1fr 1fr; grid-template-columns: minmax(200px, 1fr) 1fr 1fr; grid-template-columns: minmax(min-content, max-content) 1fr 1fr; grid-template-columns: minmax(auto, auto) 1fr 1fr; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Если указанное максимальное значение окажется меньше минимального, оно игнорируется и работает только мин. значение.

grid-row-gap: grid-column-gap: grid-gap:

grid-row-gap: задает разрыв между рядами.
grid-column-gap: задает разрыв между колонками.
grid-gap: задает разрыв для рядов и колонок разом. Это сокращение для двух предыдущих свойств. Если указать один параметр он будет выставлен для обоих значений.

// синтаксис: grid-row-gap: размер; grid-column-gap: размер; grid-gap: размер размер; /* row column */ grid-gap: размер;

Примеры:

grid-column-gap: 10px; grid-row-gap: 15px;

Заметка: префикс grid- будет удален и названия свойств станут: column-gap: и row-gap: . Chrome 68+, Safari 11.2 и Opera 54+ уже поддерживают свойства без этого префикса.

align-content: justify-content: place-content:

Выравнивает ряды/колонки. Выравниваются ячейки сетки, не элементы внутри ячеек. Чтобы выровнять элементы, используйте: justify-items , align-items , place-items .

// синтаксис: align-content: значение; // выравнивает ряды по вертикали ↓ justify-content: значение; // выравнивает колонки по горизонтали ←→ place-content: значение; // сокращенная запись: установит оба значения place-content: align-content justify-content; // сокращенная запись

Значение может быть:

  • stretch (default) - растягивает ряды/колонки (ячейки) полностью. Все пространство контейнера заполняется. Имеет смысл только если у рядов/колонок размер не задан жестко (они резиновые). Если они не резиновые, то работает как start .
  • start - ряды/колонки упакованы вплотную друг к другу к начальному краю контейнера.
  • end - ряды/колонки упакованы вплотную друг к другу к конечному краю контейнера.

  • center - ряды/колонки упакованы вплотную друг к другу и находятся по середине контейнера.

  • space-around - свободное пространство равномерно распределяется между рядами/колонками и добавляется по краям. Получается, что крайние ряд/колонка не прижимаются к краям контейнера, но расстояние до края в два раза меньше, чем между рядами/колонками.
  • space-evenly - тоже что и space-around , только расстояние до краев контейнера такое же как и между рядами/колонками.
  • space-between - крайние ряд/колонка прижимаются к краям контейнера и свободное место равномерно распределяется между рядами/колонками.

Редкие значения:

Примеры:

Полный синтаксис:

// синтаксис: align-content: normal | | ? | justify-content: normal | | ? [ | left | right ] // = space-between | space-around | space-evenly | stretch // = unsafe | safe // Center | start | end | flex-start | flex-end // = [ first | last ]? baseline // то что в или до? - можно не указывать

  • left - для justify-content , не работает для align-content . Колонки упакованы вплотную друг к другу к левому краю контейнера.

    • right - для justify-content , не работает для align-content . Колонки упакованы вплотную друг к другу к правому краю контейнера.

    flex-start

    flex-end

  • baseline , first baseline , last baseline

Все варианты значений:

// базовое выравнивание align-content: center; align-content: start; align-content: end; align-content: flex-start; align-content: flex-end; align-content: normal; // выравнивание по линии текста align-content: baseline; align-content: first baseline; align-content: last baseline; // распределение align-content: space-between; align-content: space-around; align-content: space-evenly; align-content: stretch; // когда элемент перекрывает контейнер align-content: safe center; align-content: unsafe center; // глобально align-content: inherit; align-content: initial; align-content: unset;

justify-content:

// базовое выравнивание justify-content: center; justify-content: start; justify-content: end; justify-content: flex-start; justify-content: flex-end; justify-content: left; justify-content: right; align-content: normal; // выравнивание по линии текста не имеет смысла // распределение justify-content: space-between; justify-content: space-around; justify-content: space-evenly; justify-content: stretch; // когда элемент перекрывает контейнер justify-content: safe center; justify-content: unsafe center; // глобально justify-content: inherit; justify-content: initial; justify-content: unset;

// базовое выравнивание // align-content не может быть left или right place-content: center start; place-content: start center; place-content: end left; place-content: flex-start center; place-content: flex-end center; // выравнивание по линии текста // для второго параметра (justify-content) не имеет смысла place-content: baseline center; place-content: first baseline space-evenly; place-content: last baseline right; // распределение place-content: space-between space-evenly; place-content: space-around space-evenly; place-content: space-evenly stretch; place-content: stretch space-evenly; // глобально place-content: inherit; place-content: initial; place-content: unset;

align-items: justify-items: place-items:

Выравнивает элементы сетки - то что находится внутри ячеек сетки. Срабатывает для всех элементов grid. Чтобы выровнять сами ячейки (ряды колонки), используйте: justify-content , align-content , place-content .

// синтаксис: align-items: значение; // выравнивает элементы по вертикали ↓ justify-items: значение; // выравнивает элементы по горизонтали ←→ place-items: значение; // сокращенная запись: установит оба значения place-items: align-items justify-items; // сокращенная запись

Значение может быть:

    auto (default) - указывает использовать значение justify-items: , которое задается для контейнера. Если элемент позиционирован через absolute , то применяется normal .

  • stretch - растягивает все элементы на всю ширину/высоту ячеек.
  • start - размещает все элементы в начале ячеек (слева или сверху).
  • end - размещает все элементы в конце ячеек (справа или внизу).
  • center - размещает все элементы по центру ячеек.

Редкие значения:

Примеры:

Полный синтаксис:

Выше для упрощения был не полный синтаксис, однако он покрывает 99% нужного.

// синтаксис: align-items: normal | stretch | [ ? ] | justify-items: normal | stretch | ? [ | left | right ] | | legacy [ left | right | center ] // = [ first | last ]? baseline // = unsafe | safe // Center | start | end | self-start | self-end | flex-start | flex-end // то что в или до? - можно не указывать

  • left - для justify-items , не работает для align-items . Все элементы прижимаются к левому краю ячеек.

    • right - для justify-items , не работает для align-items . Все элементы прижимаются к правому краю ячеек.

    flex-start - тоже что start для грид-сетки. Т.е. если элементы не являются детьми flex контейнера ведет себя как start .

    flex-end - тоже что end для грид-сетки. Т.е. если элементы не являются детьми flex контейнера ведет себя как end .

    baseline , first baseline , last baseline - выравнивает по линии текста (первой или последней). Обратная совместимость: для first baseline это start , для last baseline это end .

  • legacy - позволяет управлять тем, как будет наследоваться значение детьми.
    Если legacy указано без left , right , center , то значение просто наследуется у родителя или равно normal .
    Когда justify-self:auto ссылается на значение justify-items: , берется значение без слова legacy , например у legacy left будет взято left . Это нужно для правильного выравнивания тега
    или элемента с атрибутом align .

Все варианты значений:

// базовые значения align-items: normal; align-items: stretch; // выравнивание позиции // align-items не может быть left или right align-items: center; align-items: start; align-items: end; align-items: flex-start; align-items: flex-end; align-items: self-start; align-items: self-end; // выравнивание по линии текста align-items: baseline; align-items: first baseline; align-items: last baseline; // когда элемент перекрывает контейнер align-items: safe center; align-items: unsafe center; // глобально align-items: inherit; align-items: initial; align-items: unset;

// базовые значения justify-items: auto; justify-items: normal; justify-items: stretch; // выравнивание позиции justify-items: center; justify-items: start; justify-items: end; justify-items: flex-start; justify-items: flex-end; justify-items: self-start; justify-items: self-end; justify-items: left; justify-items: right; // выравнивание по линии текста justify-items: baseline; justify-items: first baseline; justify-items: last baseline; // когда элемент перекрывает контейнер justify-items: safe center; justify-items: unsafe center; // выравнивание с приоритетом заимствования значения у родителя justify-items: legacy right; justify-items: legacy left; justify-items: legacy center; // глобально justify-items: inherit; justify-items: initial; justify-items: unset;

// базовые значения place-items: auto center; place-items: normal start; // выравнивание позиции place-items: center normal; place-items: start auto; place-items: end normal; place-items: self-start auto; place-items: self-end normal; place-items: flex-start auto; place-items: flex-end normal; place-items: left auto; place-items: right normal; // выравнивание по линии текста place-items: baseline normal; place-items: first baseline auto; place-items: last baseline normal; place-items: stretch auto; // глобально place-items: inherit; place-items: initial; place-items: unset;

grid-auto-rows: grid-auto-columns:

Устанавливает размер для авто-создаваемых (неявных) рядов/колонок.

Колонки/ряды создаются автоматически, когда в сетке элементов больше чем помещается в определенные ряды/колонки (ячейки) или когда элемент размещается за пределы указанной сетки.

// синтаксис: grid-auto-columns: размер; grid-auto-rows: размер;

Возможные значения размеров смотрите в описании и - может быть px, em, %, fr и т.д.

Примеры:

Чтобы понять как создаются авто-ячейки сетки, давайте представим что у нас есть сетка 2x2 - 2 ряда и 2 колонки:

Grid-template-columns: 60px 60px; grid-template-rows: 90px 90px

Теперь, попробуем разместить элементы в сетку указав им позиции через свойства:

Item-a { grid-column: 1; grid-row: 2; } .item-b { grid-column: 5; grid-row: 2; }

Элемент.item-b мы попросили разместиться в несуществующей колонке 5. У нас только 2 колонки, поэтому сетка автоматически расшириться и ей будут добавлены еще 3 колонки с auto шириной. Текущие свойства позволяют нам задать размеры для таких неявных колонок:

Grid-auto-columns: 60px;

Интересный момент для неявных колонок рядов и repeat() :

grid-auto-flow:

Позволяет изменить логику размещения элементов в пустые ячейки. По умолчанию алгоритм такой → ↓ → можно сделать так ↓ → ↓ .

Когда элементам конкретно не указано в какой ячейке (области) они должны быть расположены, то они размещаются в пустые ячейки. По умолчанию заполнение идет слева направо (→) до конца ряда, переход на следующий ряд и опять заполнение (похоже на то как мы читаем текст).

// синтаксис: grid-auto-flow: row | column | row dense | column dense

    row (default) - расставляет элементы в сетке по рядам → ↓ → . Добавляет ряды если в сетке нет места.

    column - расставляет элементы в сетке по колонкам ↓ → ↓ . Добавляет колонки если в сетке нет места.

  • dense - включает «dense» алгоритм заполнения, который пытается разместить элементы так, чтобы не оставалось пустых пространств (по умолчанию работает алгоритм «sparse»). При этом элементы могут располагаться не по-порядку. При вставке каждого следующего элемента, алгоритм проверяет нет ли пустой ячейки сзади куда может поместиться текущий элемент, если есть, помещает его туда а не в следующую ячейку. dense имеет смысл только при наличии областей в сетке - это когда элементу указано разместиться сразу в несколько ячеек (через span), тогда он как правило не помещается в одну ячейку и остается пустое место.

Примеры:

Допустим у нас есть такой HTML:

item-a
item-b
item-c
item-d
item-e

Теперь, мы создали сетку с 5-ю колонками и двумя рядами и два элемента расположили в конкретные ячейки:

Grid { display: grid; grid-template: 60px 60px 60px 60px 60px / 30px 30px; /* по умолчанию: grid-auto-flow: row; */ }

Теперь установим grid-auto-flow: column:

grid:

Позволяет сокращенно записать свойства:

  • grid-template-rows:
  • grid-template-columns:
  • grid-template-areas:
  • grid-auto-rows:
  • grid-auto-columns:
  • grid-auto-flow:

Т.е. в этом свойстве можно описать почти все свойства грид-сетки. Однако, тут можно описать свойства только для «явных» или «неявных» рядов/колонок, сразу для тех и других не получиться. Если нужно указать свойства для тех и других, то нужно дописывать соответствующие свойства в дополнении к grid: .

// синтаксис: grid: none grid: grid-template grid: grid-template-rows / grid-template-columns grid: grid-template-areas grid: grid-template-rows / grid-auto-columns? grid: grid-auto-rows? / grid-template-columns // то что в или до? - можно не указывать

    none - устанавливает все свойства в начальное состояние.

    grid-template-rows / grid-auto-columns? - ключевое слово auto-flow с правой стороны слэша устанавливает grid-auto-flow: column . dense включает алгоритм упаковки «dense». Если не указан grid-auto-columns , то он будет равен auto .

  • grid-auto-rows? / grid-template-columns - ключевое слово auto-flow с левой стороны слэша устанавливает grid-auto-flow: row . dense включает алгоритм упаковки «dense». Если не указан grid-auto-rows , то он будет равен auto .

Примеры:

grid: "header header header header" "main main main right right" "footer footer footer footer"; // тоже что: grid-template-areas: "header header header header" "main main main right right" "footer footer footer footer"; grid: 100px 300px / 3fr 1fr; // тоже что: grid-auto-flow: row; grid-template-columns: 200px 1fr; grid: auto-flow dense 100px / 1fr 2fr; // тоже что: grid-auto-flow: row dense; grid-auto-rows: 100px; grid-template-columns: 1fr 2fr; grid: 100px 300px / auto-flow 200px; // тоже что: grid-template-rows: 100px 300px; grid-auto-flow: column; grid-auto-columns: 200px;

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

Grid: "header header header" 1fr "footer footer footer" 25px / auto 50px auto; // тоже что: grid-template-areas: "header header header" "footer footer footer"; grid-template-rows: 1fr 25px ; grid-template-columns: auto 50px auto;

И еще варианты:

Grid: repeat(auto-fill, 5em) / auto-flow 1fr; grid: auto-flow 1fr / repeat(auto-fill, 5em); grid: auto 1fr auto / repeat(5, 1fr); grid: repeat(3, auto) / repeat(4, auto);

Для элементов

CSS свойства: float , display:inline-block , display:table-cell , vertical-align и column-* никак не влияют на элементы grid контейнера. У grid сетки свои правила...

Grid-row-start: grid-row-end: grid-column-start: grid-column-end: grid-row: grid-column:

Указывает положение элемента в сетке. Т.е. размещает элемент в указанную ячейку. Указывать нужно имя или номер линии к которой относится ячейка и к которой нужно прикрепить элемент.

grid-column и grid-row - это сокращение для свойств: grid-column-start/grid-column-end и grid-row-start / grid-row-end . Можно указать только первое (одно) значение, оно будет относиться к начальной линии и элемент будет растягиваться на 1 ряд/колонку (т.е. будет помещен в одну ячейку начальная линия которой указана).

// синтаксис: grid-row-start: значение; // где начинается линия ряда grid-row-end: значение; // где кончается линия ряда grid-column-start: значение; // где начинается линия колонки grid-column-end: значение; // где кончается линия колонки grid-row: grid-row-start / grid-row-end; grid-column: grid-column-start / grid-column-end; // можно указать одно значение, второе значение будет span 1 grid-row: grid-row-start; grid-column: grid-column-start;

Значение может быть:

Примеры:

.item-a { grid-column-start: 2; grid-column-end: five; grid-row-start: row1-start grid-row-end: 3 }
.item-b { grid-column-start: 1; grid-column-end: span col4-start; grid-row-start: 2 grid-row-end: span 2 }

Если не установлены свойства grid-column-end/grid-row-end элемент по умолчанию будет растягиваться на 1 ряд/колонку. align-self: justify-self: place-self:

Выравнивает текущий элемент внутри ячейки. Применяется к отдельному элементу контейнера.

// синтаксис: align-self: значение; // выравнивает элемент внутри ячейки по вертикали ↓ justify-self: значение; // выравнивает элемент внутри ячейки по горизонтали ←→ place-self: значение; // сокращенная запись: установит оба значения place-self: align-self justify-self; // сокращенная запись

Значение может быть:

  • stretch (defailt) - растягивает текущий элемент на всю ширину/высоту ячейки.
  • start - размещает текущий элемент в начале ячейки (слева или сверху).
  • end - размещает текущий элемент в конце ячейки (справа или внизу).
  • center - размещает текущий элемент по центру ячейки.

Редкие значения:

    safe значение - если ширина или высота элемента превышает размер ячейки, то значение переключается на start. В значении тут может быть только: center или end .

    # Каркас для игрового приложения

    #grid { /** * Две колонки: * 1. подстраивается под контент, * 2. получает все оставшееся пространтсов * (но не может быть меньше минимального размера контента в ней или controls блока в этой же колонке) * * Три ряда: * 1. подстраивается под контент, * 2. получает все свободное пространство * (но не может быть меньше минимального размера любого из блоков в этмо ряду) * 3. подстраивается под контент. */ display: grid; grid-template-columns: /* 1 */ auto /* 2 */ 1fr; grid-template-rows: /* 1 */ auto /* 2 */ 1fr /* 3 */ auto; /* растянем на всю высоту */ height: 100vh; } /* указывает позиции блоков в сетке с помощью координат */ #title { grid-column: 1; grid-row: 1; } #score { grid-column: 1; grid-row: 3; } #stats { grid-column: 1; grid-row: 2; } #board { grid-column: 2; grid-row: 1 / span 2; } #controls { grid-column: 2; grid-row: 3; justify-self: center; }
    Game Title
    Score
    Stats
    Board
    Controls

    Усложним задачу.

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

    В этом случае удобнее будет использовать области Grid сетки.

    /* книжная ориентация */ @media (orientation: portrait) { #grid { display: grid; /* создадаим структуру сетки и укажем названия областей, * Такая структура будет работать по умолчанию и подоходиь для альбомной ориентации. */ grid-template-areas: "title stats" "score stats" "board board" "ctrls ctrls"; /* укажем размеры для рядов и колонок. */ grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr auto; height: 100vh; } } /* альбомная ориентация */ @media (orientation: landscape) { #grid { display: grid; /* создадаим структуру сетки и укажем названия областей, * Такая структура будет работать по умолчанию и подоходиь для альбомной ориентации. */ grid-template-areas: "title board" "stats board" "score ctrls"; /* укажем размеры для рядов и колонок. */ grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; height: 100vh; } } /* расположим элементы в именованные областя сетки */ #title { grid-area: title; } #score { grid-area: score; } #stats { grid-area: stats; } #board { grid-area: board; } #controls { grid-area: ctrls; justify-self: center; }

    Game Title
    Score
    Stats
    Board
    Controls

    Поддержка браузерами

    Grid поддерживают 92% браузеров.

    Ниже поддержка Grid браузерами по данным CanIuse . Число указывает, что браузер поддерживает функцию в этой версии и выше.

    Desktop

    Chrome Opera Firefox IE Edge Safari
    57 44 52 11* 16 10.1

    Mobile / Tablet

    iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox
    10.3 - - 62 66 57

    Чтобы проверить в css поддерживает ли текущий браузер Grid, можно использовать @supports (в IE не работает):

    @supports(display: grid) { /* grid поддерживается браузером */ div { display: grid; } } @supports not(display: grid) { /* grid НЕ поддерживается браузером */ div { display: flex; } }



СХОЖИЕ СТАТЬИ