Атрибуты: Параметры контейнеров сетки.

  Отдельные атрибуты стилей контейнеров сетки применяются для создания виртуальной координатной сетки, в которой адресно размещается пользовательский контент (CSS аналог таблиц).
  Эта сетка создаётся на Web-странице полем элемента тега связанного со стилем, установленным значением атрибута display: grid, display: inline-grid или display: subgrid, который является контейнером сетки.
  Отдельные атрибуты стилей контейнеров сетки позволяют "родительскому" элементу (контейнеру сетки) разместить на Web-странице виртуальную сетку, которая поделит контейнер сетки на строки и столбцы и задаст адресность каждой, получившейся таким образом, ячейки виртуальной таблицы.
  Также эти атрибуты стилей для "дочерних" элементов контейнера сетки позволяют управлять порядком размещения их полей в виртуальных ячейках сетки, который может отличаться от порядка следования этих элементов в HTML-коде.
  Создание сетки.
  Атрибуты стилей для создания сетки применяются к контейнеру сетки - "родительскому" элементу для элементов, которые будут размещаться в ячейках сетки.
  Атрибуты:
  grid-template-rows - Устанавливает горизонтальную разметку (стро́ки) сетки.

Формат:

  • grid-template-rows:
      Список строк
      |none
      |initial
      |inherit
      |unset

Значения:

  • Список строк - Перечисленные через пробел значения строк сетки (сверху вниз). Каждое значение строки имеет формат:

    • [[Имя строки]] [Ширина строки]

      Имя строки это смысловой символьный контент, назначенный именем строки заданный как CSS значение string.
      Имя строки не обязательно, если задана ширина строки но, при наличии, заключается в квадратные скобки. В этих скобках можно указать несколько имен строки списком через пробел.
      Имя строки задаёт (совпадает) также имя горизонтальной линии сетки, которая ограничивает эту строку сверху.
      Первая (сверху) горизонтальная линия сетки уже имеет одно имя, которое обозначается ключевым словом start, следовательно, первая строка также имеет ещё и имя start.
      Последняя горизонтальная линия имеет имя, которое обозначается ключевым словом end.

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

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

    1. Размер - Линейная величина с единицей измерения.
    2. minmax(Значение1, Значение2) - Обращение к CSS функции minmax, которая возвращает массив из двух значений задающих минимальный и максимальный размер ширины строки.
        Такой формат значения ширины строки позволяет сделать гибким этот размер.
    3. max-content - Ключевое слово, которое задаёт размер ширины строки равный крупнейшей максимальной высоте контента элементов в этой строке сетки.
        Это значение можно подставлять в качестве значения любого аргумента при обращении к функции minmax.
    4. min-content - Ключевое слово, которое задаёт размер ширины строки равный крупнейшей минимальной высоте контента элементов в этой строке сетки.
        Это значение можно подставлять в качестве значения любого аргумента при обращении к функции minmax.
    5. auto - Ключевое слово, которое задаёт размер ширины строки аналогично обращению к функции minmax(min-content, max-content).
        Это значение ширины строки по умолчанию.

      Стро́ки, ширина которых задана линейной величиной с единицей измерения fr, распределяют между собой горизонтальное пространство сетки оставшееся от строк, размер которых задан иначе.
      Для элемента - контейнера сетки все элементы, размещённые в сетке, являются его внутренним контентом. Поэтому, при установке ширины строк атрибутом grid-template-rows, поле контейнера сетки подчиняется заданным для него правилам переполнения.
      Точно также, внутренний контент любого элемента размещённого в сетке может не входить в ширину указанной для него строки, и поля этих элементов тоже подчиняются заданным для них правилам переполнения.
     Весь список строк, или любую его часть можно задать обращением к функции -
              repeat(Количество строк, Значение строки).
      В качестве значения аргумента количество строк дополнительно можно использовать одно из ключевых слов:
    • AUTO-FILL - Автозаполнение.
        Задаёт количество строк равное наиболее возможному положительному целому числу, которое не вызовёт переполнения сетки контейнера по горизонтали с учётом всех заданных строк.
    • AUTO-FIT - Автоподгонка.
        Работает так же, как автозаполнение, однако не распределяет пустые стро́ки.
  • none - Означает, что нет прямой разметки сетки (умолчание).
      Стро́ки указаны неявно, и их размер будет определяться атрибутом grid-auto-rows.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Пояснения:

  1. grid-template-rows: 20px 30px 10px; - Заданы три не именованные строки сетки с шириной в 20, 30 и 10 пикселей.
  2. grid-template-rows: [bca] 20px [abc] 30px [cab] 10px; - Заданы три именованные строки сетки с шириной в 20, 30 и 10 пикселей, с именами соответственно bca, abc и cab.
  3. grid-template-rows: [bca] [abc] [cab]; - Заданы три именованные строки сетки с шириной auto, с именами соответственно bca, abc и cab.
  4. grid-template-rows: 20px 1fr 10px 2fr; - Заданы четыре не именованные строки сетки.

      Первая с шириной 20 пикселей.
      Третья с шириной 10 пикселей.
      Вторая и четвёртая строки разделят оставшееся горизонтальное пространство (за минусом 30-ти пикселей) в соотношении соответственно 1 к 2.
  5. grid-template-rows: repeat(100, 30px); - Заданы сто не именованных строк сетки с шириной в 30 пикселей каждая.
  6. grid-template-rows: 20px repeat(40, [abc] 1fr) 30px; - Заданы сорок две строки сетки.
      Первая не именованная с шириной в 20 пикселей.
      Последняя не именованная с шириной в 30 пикселей.
      Сорок одинаково именованных - abc0, которые равномерно разделят оставшееся горизонтальное пространство (за минусом 50-ти пикселей).
      Смысл одинаково именованных смежных строк в том, что можно использовать их общее имя для размещения "дочерних" элементов контейнера сетки в, таким образом, объединённой строке.
  7. grid-template-rows: [bca] minmax(20px,30px) [abc] 1fr [cab] 3fr; - Заданы три именованные строки сетки.
      Первая с именем bca и шириной от 20 до 30 пикселей.
      Вторая и третья с именами abc и cab разделят оставшееся горизонтальное пространство (за минусом 30-ти пикселей) в соотношении соответственно 1 к 3.
  grid-auto-rows - Устанавливает ширину стро́ки сетки по умолчанию.

Формат:

  • grid-auto-rows:
      Ширина строки
      |auto
      |initial
      |inherit
      |unset

Значения:

  • Ширина строки задаётся одним из значений:

    1. Размер - Линейная величина с единицей измерения.
    2. minmax(Значение1, Значение2) - Обращение к CSS функции minmax, которая возвращает массив из двух значений задающих минимальный и максимальный размер ширины строки.
        Такой формат значения ширины строки позволяет сделать гибким этот размер.
    3. max-content - Ключевое слово, которое задаёт размер ширины строки равный крупнейшей максимальной высоте контента элементов в этой строке сетки.
        Это значение можно подставлять в качестве значения любого аргумента при обращении к функции minmax.
    4. min-content - Ключевое слово, которое задаёт размер ширины строки равный крупнейшей минимальной высоте контента элементов в этой строке сетки.
        Это значение можно подставлять в качестве значения любого аргумента при обращении к функции minmax.
  • auto - Ключевое слово, которое задаёт размер ширины строки аналогично обращению к функции minmax(min-content, max-content).
      Это значение ширины строки по умолчанию.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Для элемента - контейнера сетки все элементы, размещённые в сетке, являются его внутренним контентом.
  Поэтому, при установке ширины строк атрибутом grid-auto-rows, поле контейнера сетки подчиняется заданным для него правилам переполнения.
  Точно также, внутренний контент любого элемента размещённого в сетке может не входить в ширину указанной для него строки, и поля этих элементов тоже подчиняются заданным для них правилам переполнения.
  grid-row-gap - Устанавливает отступ между строками сетки.

Формат:

  • grid-row-gap:
      Ширина отступа
      |initial
      |inherit
      |unset

Значения:

  • Ширина отступа - Линейная величина с единицей измерения.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  • unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Отступ между строками сетки, в отличии от внешних отступов заданных для "дочерних" элементов контейнера сетки, позволяет разместиться линейке горизонтального скроллинга поля "дочернего" элемента при его переполнении.
  grid-template-columns - Устанавливает вертикальную разметку (столбцы) сетки.

Формат:

  • grid-template-columns:
      Список столбцов
      |none
      |initial
      |inherit
      |unset

Значения:

  • Список столбцов - Перечисленные через пробел значения столбцов сетки (слева направо). Каждое значение столбца имеет формат:

    • [[Имя столбца]] [Ширина столбца]

      Имя столбца это смысловой символьный контент назначенный именем столбца заданный как CSS значение string.
      Имя столбца не обязательно, если задана ширина столбца но, при наличии, заключается в квадратные скобки. В этих скобках можно указать несколько имен столбца списком через пробел.
      Имя столбца задаёт (совпадает) также имя вертикальной линии сетки, которая ограничивает эту строку справа.
      Первая (справа) вертикальная линия сетки уже имеет одно имя, которое обозначается ключевым словом start, следовательно, первый столбец также имеет ещё и имя start.
      Последняя вертикальная линия имеет имя, которое обозначается ключевым словом end.

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

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

    1. Размер - Линейная величина с единицей измерения.
    2. minmax(Значение1, Значение2) - Обращение к CSS функции minmax, которая возвращает массив из двух значений задающих минимальный и максимальный размер ширины столбца.
        Такое формат значения ширины столбца позволяет сделать гибким этот размер.
    3. max-content - Ключевое слово, которое задаёт размер ширины столбца равный крупнейшей максимальной ширине контента элементов в этом столбце сетки.
        Это значение можно подставлять в качестве значения любого аргумента при обращении к функции minmax.
    4. min-content - Ключевое слово, которое задаёт размер ширины столбца равный крупнейшей минимальной ширине контента элементов в этой строке сетки.
        Это значение можно подставлять в качестве значения любого аргумента при обращении к функции minmax.
    5. auto - Ключевое слово, которое задаёт размер ширины столбца аналогично обращению к функции minmax(min-content, max-content).
        Это значение ширины столбца по умолчанию.

      Столбцы, ширина которых задана линейной величиной с единицей измерения fr, распределяют между собой вертикальное пространство сетки, оставшееся от столбцов, размер которых задан иначе.
      Для элемента - контейнера сетки все элементы, размещённые в сетке, являются его внутренним контентом. Поэтому, при установке ширины столбцов атрибутом grid-template-columns, поле контейнера сетки подчиняется заданным для него правилам переполнения.
      Точно также, внутренний контент любого элемента размещённого в сетке может не входить в ширину указанного для него столбца, и поля этих элементов тоже подчиняются заданным для них правилам переполнения.
      Весь список столбцов, или любую его часть можно задать обращением к функции -
              repeat(Количество столбцов, Значение столбца).
      В качестве значения аргумента количество столбцов дополнительно можно использовать одно из ключевых слов:
    • AUTO-FILL - Автозаполнение. Задаёт количество столбцов равное наиболее возможному положительному целому числу, которое не вызовет переполнения сетки контейнера по вертикали с учётом всех заданных столбцов.
    • AUTO-FIT - Автоподгонка. Работает так же, как автозаполнение, однако не распределяет пустые столбцы.
  • none - Означает, что нет прямой разметки сетки (умолчание).
      Столбцы указаны неявно, и их размер будет определяться атрибутом grid-auto-columns.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Пояснения:

  1. grid-template-columns: 20px 30px 10px; - Заданы три не именованные строки сетки с шириной в 20, 30 и 10 пикселей.
  2. grid-template-columns: [bca] 20px [abc] 30px [cab] 10px; - Заданы три именованные столбца сетки с шириной в 20, 30 и 10 пикселей, с именами соответственно bca, abc и cab.
  3. grid-template-columns: [bca] [abc] [cab]; - Заданы три именованные столбца сетки с шириной auto, с именами соответственно bca, abc и cab.
  4. grid-template-columns: 20px 1fr 10px 2fr; - Заданы четыре не именованных столбца сетки.
      Первый с шириной 20 пикселей.
      Третий с шириной 10 пикселей.
      Второй и четвёртый столбцы разделят оставшееся вертикальное пространство (за минусом 30-ти пикселей) в соотношении соответственно 1 к 2.
  5. grid-template-columns: repeat(100, 30px); - Заданы сто не именованных столбцов сетки с шириной в 30 пикселей каждый.
  6. grid-template-columns: 20px repeat(40, [abc] 1fr) 30px; - Заданы сорок два столбца сетки.
      Первый не именованный с шириной в 20 пикселей.
      Последний не именованный с шириной в 30 пикселей.
      Сорок одинаково именованных - abc0, которые равномерно разделят оставшееся вертикальное пространство (за минусом 50-ти пикселей).
      Смысл одинаково именованных смежных столбцов в том, что можно использовать их общее имя для размещения "дочерних" элементов контейнера сетки в, таким образом, объединённом столбце.
  7. grid-template-columns: [bca] minmax(20px,30px) [abc] 1fr [cab] 3fr; - Заданы три именованных столбца сетки.
      Первый с именем bca и шириной от 20 до 30 пикселей.
      Второй и третий с именами abc и cab разделят оставшееся вертикальное пространство (за минусом 30-ти пикселей) в соотношении соответственно 1 к 3.
  grid-auto-columns - Устанавливает ширину столбца сетки по умолчанию.

Формат:

  • grid-auto-columns:
      Ширина столбца
      |auto
      |initial
      |inherit
      |unset

Значения:

  • Ширина столбца задаётся одним из значений:

    1. Размер - Линейная величина с единицей измерения.
    2. minmax(Значение1, Значение2) - Обращение к CSS функции minmax, которая возвращает массив из двух значений задающих минимальный и максимальный размер ширины столбца.
        Такой формат значения ширины столбца позволяет сделать гибким этот размер.
    3. max-content - Ключевое слово, которое задаёт размер ширины столбца равный крупнейшей максимальной ширине контента элементов в этой столбце сетки.
        Это значение можно подставлять в качестве значения любого аргумента при обращении к функции minmax.
    4. min-content - Ключевое слово, которое задаёт размер ширины столбца равный крупнейшей минимальной ширине контента элементов в этой столбце сетки.
        Это значение можно подставлять в качестве значения любого аргумента при обращении к функции minmax.
  • auto - Ключевое слово, которое задаёт размер ширины столбца аналогично обращению к функции minmax(min-content, max-content).
      Это значение ширины столбца по умолчанию.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Для элемента - контейнера сетки все элементы, размещённые в сетке, являются его внутренним контентом. Поэтому, при установке ширины столбцов атрибутом grid-auto-columns, поле контейнера сетки подчиняется заданным для него правилам переполнения.
  Точно также, внутренний контент любого элемента размещённого в сетке может не входить в ширину указанного для него столбца, и поля этих элементов тоже подчиняются заданным для них правилам переполнения.
  grid-column-gap - Устанавливает отступ между столбцами сетки.

Формат:

  • grid-column-gap:
      Ширина отступа
      |initial
      |inherit
      |unset

Значения:

  • Ширина отступа - Линейная величина с единицей измерения.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  • unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Отступ между столбцами сетки, в отличии от внешних отступов заданных для "дочерних" элементов контейнера сетки, позволяет разместиться линейке вертикального скроллинга поля "дочернего" элемента при его переполнении.
  grid-template-areas - Устанавливает матрицу имён сетки.
  Матрица имён сетки задаёт имя каждой ячейке виртуальной таблицы, заданной атрибутами grid-template-rows и grid-template-columns и должна структурно соответствовать этой таблице.
  Матрица имен сетки не обязательна, она лишь расширяет grid-функционал.

Формат:

  • grid-template-areas:
      Список строк матрицы имён
      |none
      |initial
      |inherit
      |unset

Значения:

  • Список строк матрицы имён - Перечисленные через пробел значения строк матрицы имён сетки (сверху вниз). Каждое значение строки матрицы имён имеет формат:

    • "[Имя ячейки1] [Имя ячейки2] ... [Имя ячейкиN]"

      Имя ячейки это смысловой символьный контент назначенный именем соответствующей ячейки этой строки матрицы заданный как CSS значение string.
      Имена смежных ячеек, как по горизонтали, так и по вертикали могут совпадать.
      Смысл одинаково именованных смежных ячеек в том, что можно использовать их общее имя для размещения "дочерних" элементов контейнера сетки в, таким образом, объединённых ячейках.
  • none - Означает, что нет прямой разметки сетки (умолчание). Ячейки указаны неявно.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Пояснение:

  • grid-template-areas: "A B C"
    	               "D E F";
    - Задана матрица сетки из двух строк и трех столбцов, которая вместе с явно заданной для того же grid-элемента сеткой:
    • grid-template-rows: repeat(2, 1fr);
    • grid-template-columns: repeat(3, 1fr);
    устанавливает виртуальную таблицу, у которой именованы все ячейки.
  grid-template - Устанавливает горизонтальную (стро́ки) и вертикальную разметку (столбцы) сетки.

Формат:

  • grid-template:
      Список столбцов / Список столбцов
      |none
      |initial
      |inherit
      |unset

Значения:

  • Список строк - Значение соответствует значению атрибута grid-template-rows.
  • Список столбцов - Значение соответствует значению атрибута grid-template-columns.
  • none - Означает, что нет прямой разметки сетки (умолчание).
      Разметка указана неявно, и размер строк и столбцов будет определяться атрибутами grid-auto-rows и grid-auto-columns.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  grid-auto-flow - Устанавливает последовательность размещения элементов в сетке.
  Указание последовательности размещения в сетке может быть необходимо для элементов, у которых значение auto имеют атрибуты grid-row, grid-column и grid-area.
  Если сетка размечена матрицей, то значение атрибута grid-auto-flow не учитывается.

Формат:

  • grid-auto-flow:
      row [dense]
      |column [dense]
      |dense
      |initial
      |inherit
      |unset

Значения:

  • row - Элементы располагаются в последовательности заполнения строк (умолчание).
  • column - Элементы располагаются в последовательности заполнения столбцов.
  • dense - Элементы располагаются в последовательности заполнения "дырок" (ближайших, в строках или с столбцах соответственно).
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  grid-gap - Устанавливает отступ между строками и столбцами сетки.

Формат:

  • grid-column-gap:
      Ширина отступа строк [Ширина отступа столбцов]
      |initial
      |inherit
      |unset

Значения:

  • Ширина отступа строк - Значение соответствует значению атрибута grid-row-gap.
  • Ширина отступа столбцов - Значение соответствует значению атрибута grid-column-gap.
      По умолчанию значение равно ширине отступа строк.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  • unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Отступ между строками и столбцами сетки, в отличие от внешних отступов заданных для "дочерних" элементов контейнера сетки, позволяет разместиться линейкам горизонтального и вертикального скроллинга поля "дочернего" элемента при его переполнении.
  Размещение элементов сетки.
  Атрибуты стилей для размещения элементов сетки применяются к "дочерним" элементам контейнера сетки.
  Порядок следования "дочерних" элементов в контейнере сетки в HTML-коде может иметь значение, только если к этим элементам не применяются атрибуты стилей размещения.
  Атрибуты:
  grid-row-start - Устанавливает верхнюю границу для размещения поля элемента в сетке.

Формат:

  • grid-row-start:
      Абсолютный номер
      |Имя
      |Имя Относительный номер
      |auto
      |initial
      |inherit
      |unset

Значения:

  Совпадение границ поля элемента с линиями сетки относительно, так как может быть изменено атрибутом стиля margin.
  grid-row-end - Устанавливает нижнюю границу для размещения поля элемента в сетке.

Формат:

  • grid-row-end:
      Абсолютный номер
      |Имя
      |Имя Относительный номер
      |auto
      |initial
      |inherit
      |unset

Значения:

  Совпадение границ поля элемента с линиями сетки относительно, так как может быть изменено атрибутом стиля margin.
  grid-row - Устанавливает горизонтальные границы для размещения поля элемента в сетке.

Формат:

  • grid-row:
      Верхняя граница [/ Нижняя граница]
      |auto
      |initial
      |inherit
      |unset

Значения:

  • Верхняя граница - Значение соответствует значению атрибута grid-row-start.
  • Нижняя граница - Значение соответствует значению атрибута grid-row-end.
  • auto - Означает, что горизонтальные границы сетки определяются автоматически (умолчание).
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Совпадение границ поля элемента с линиями сетки относительно, так как может быть изменено атрибутом стиля margin.
  grid-column-start - Устанавливает левую границу для размещения поля элемента в сетке.

Формат:

  • grid-column-start:
      Абсолютный номер
      |Имя
      |Имя Относительный номер
      |auto
      |initial
      |inherit
      |unset

Значения:

  Совпадение границ поля элемента с линиями сетки относительно, так как может быть изменено атрибутом стиля margin.
  grid-column-end - Устанавливает правую границу для размещения поля элемента в сетке.

Формат:

  • grid-column-end:
      Абсолютный номер
      |Имя
      |Имя Относительный номер
      |auto
      |initial
      |inherit
      |unset

Значения:

  Совпадение границ поля элемента с линиями сетки относительно, так как может быть изменено атрибутом стиля margin.
  grid-column - Устанавливает вертикальные границы для размещения поля элемента в сетке.

Формат:

  • grid-column:
      Левая граница [/ Правая граница]
      |auto
      |initial
      |inherit
      |unset

Значения:

  • Левая граница - Значение соответствует значению атрибута grid-column-start.
  • Правая граница - Значение соответствует значению атрибута grid-column-end.
  • auto - Означает, что вертикальные границы сетки определяются автоматически (умолчание).
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Совпадение границ поля элемента с линиями сетки относительно, так как может быть изменено атрибутом стиля margin.
  grid-area - Устанавливает все границы для размещения поля элемента в сетке.

Формат:

  • grid-area:
      Верхняя граница [/ Нижняя граница] / [Левая граница [/ Правая граница]]]
      |Имя ячейки
      |auto
      |initial
      |inherit
      |unset

Значения:

  • Верхняя граница - Значение соответствует значению атрибута grid-row-start.
  • Нижняя граница - Значение соответствует значению атрибута grid-row-end.
  • Левая граница - Значение соответствует значению атрибута grid-column-start.
  • Правая граница - Значение соответствует значению атрибута grid-column-end.
  • Имя ячейки - Имя ячейки сетки заданное как CSS значение string.
      Если имена смежных ячеек в строках и столбцах совпадают, то поля элемента займёт все эти ячейки.
      Если одинаковые имена имеют не смежные ячейки, или одинаковые имена образуют в матрице имен "угол", то результат будет не предсказуемым.
  • auto - Означает, что границы поля элемента определяются автоматически (умолчание).
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Совпадение границ поля элемента с линиями сетки относительно, так как может быть изменено атрибутом стиля margin.

Примеры:
<DIV id="div0" class="divk">
  <DIV id="div1" class="divc" STYLE="background: beige;">1</DIV>
  <DIV id="div2" class="divc" STYLE="background: purple;">2</DIV>
  <DIV id="div3" class="divc" STYLE="background: green;">3</DIV>
  <DIV id="div4" class="divc" STYLE="background: yellow;">4</DIV>
  <DIV id="div5" class="divc" STYLE="background: cornflowerblue;">5</DIV>
  <DIV id="div6" class="divc" STYLE="background: darksalmon;">6</DIV>
  <DIV id="div7" class="divc" STYLE="background: aquamarine;">7</DIV>
  <DIV id="div8" class="divc" STYLE="background: mistyrose;">8</DIV>
  <DIV id="div9" class="divc" STYLE="background: peachpuff;">9</DIV>
</DIV>
...........

Симметричная линейная разметка:

<STYLE>
  #div0 { display: grid;
    grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto; grid-auto-columns: auto;
    grid-auto-flow: column;}
</STYLE>

Наведите мышку.
1
2
3
4
5
6
7
8
9


Матричная разметка:

<STYLE>
  #div0 { display: grid;
    grid-template-areas: "A B C" "D E F" "H G Q";
    grid-auto-rows: auto; grid-auto-columns: auto;
    grid-auto-flow: column;}
  #div0 #div1 {grid-area: Q;}
  #div0 #div2 {grid-area: G;}
  #div0 #div3 {grid-area: H;}
  #div0 #div4 {grid-area: F;}
  #div0 #div5 {grid-area: E;}
  #div0 #div6 {grid-area: D;}
  #div0 #div7 {grid-area: C;}
  #div0 #div8 {grid-area: B;}
  #div0 #div9 {grid-area: A;}
</STYLE>

Наведите мышку.
1
2
3
4
5
6
7
8
9


Симметричная линейная разметка c разными отступами:

<STYLE>
  #div0 {display: grid;
    grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto; grid-auto-columns: auto; }
  #div0 #div1 {margin: 0px;}
  #div0 #div2 {margin: 5px;}
  #div0 #div3 {margin: 10px;}
  #div0 #div4 {margin: 20px;}
  #div0 #div5 {margin: -25px;}
  #div0 #div6 {margin: -15px;}
  #div0 #div7 {margin: -10px;}
  #div0 #div8 {margin: -15px;}
  #div0 #div9 {margin: -0px;}
</STYLE>

Наведите мышку.
1
2
3
4
5
6
7
8
9


Не симметричная линейная разметка:

<STYLE>
  #div0 {display: grid;
    grid-template-rows: 1fr 2fr 3fr; grid-template-columns: 1fr 2fr 3fr;
    grid-auto-rows: auto; grid-auto-columns: auto; }
</STYLE>

Наведите мышку.
1
2
3
4
5
6
7
8
9


Симметричная линейная разметка с переполнением полей:

<STYLE>
  #div0 {display: grid; width: 300px; height: 300px;
    grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto; grid-auto-columns: auto; grid-gap: 50px;}
  #div0 .divc { width: 100px; height: 100px; font-size: 170px;}
</STYLE>

Наведите мышку.
1
2
3
4
5
6
7
8
9