CSS свойство grid-template

Свойство grid-template определяет колонки, строки и области сетки. Это сокращённое свойство для следующих свойств:

Свойство grid-template задаёт строки и колонки, разделённые символом прямой черты (/).

INFO

Свойство grid-template не влияет на любые отступы (gap), передающиеся вниз.

Сокращённое свойство CSS grid сбрасывает другие свойства сетки (например, grid-auto-rows и grid-gap) к их начальным значениям. Если вы хотите задать только строки, колонки и области, не затрагивая другие свойства сетки, используйте grid-template вместо grid.

Начальное значение	none
Применяется к	Контейнеры сетки.
Наследуется	Нет.
Анимируется	Да. Сетка анимируется.
Версия	CSS Grid Layout Module Level 1
Синтаксис DOM	object.style.gridTemplate ="100px / auto auto";

Синтаксис

CSS синтаксис grid-template

css

grid-template: none | [ <grid-template-rows> / <grid-template-columns> ] | <grid-template-areas> | initial | inherit;

Пример свойства grid-template:

Пример кода CSS grid-template

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template: 170px / auto auto auto;
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Try it Yourself »

Результат

CSS grid-template another

Пример свойства grid-template, где элементу сетки присвоено имя "item1":

Ещё один пример кода CSS grid-template

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        grid-area: item1;
      }
      .grid-container {
        display: grid;
        grid-template: 'item1 item1 . .' 'item1 item1 . .';
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template property example</h2>
    <div class="grid-container">
      <div class="box">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Try it Yourself »

Значения

Значение	Описание	Запустить
none	Размер не будет определён. Это значение по умолчанию для данного свойства.	-
grid-template-rows / grid-template-columns	Задаёт размер строк и колонок.	Запустить »
grid-template-areas	Задаёт макет сетки с использованием именованных элементов. Синтаксис: `<string>+`	Запустить »
initial	Заставляет свойство использовать значение по умолчанию.	-
inherit	Наследует свойство от родительского элемента.	-

Practice

Что означает свойство 'grid-template' в CSS?

Оно позволяет создать адаптивный макет с строками и колонками.Оно используется для выравнивания содержимого внутри элемента сетки.Это сокращённое свойство для 'grid-template-rows', 'grid-template-columns' и 'grid-template-areas'.Оно изменяет цвет фона сетки.

CSS свойство grid-template ​

Синтаксис ​

Пример свойства grid-template: ​

Результат ​

Пример свойства grid-template, где элементу сетки присвоено имя "item1": ​

Значения ​