Свойство grid-template

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

При указании в свойствах значений в пикселях размеры элементов будут точно им соотвествовать. Если мы задаем слово auto, то столбцы и ряды будут заполнять все доступное пространство. Использование единицы fr (фракция) означает, что все пространство будет разбито на одинаковые доли. Преимуществом fr является его адаптивность к разным контейнерам или разрешениям экрана, поскольку fr просто расделяет их на указанное количество фракций без привязки к точному размеру в пикселях.

Синтаксис

cssселектор {
  grid-template: ширина и количество рядов / ширина и количество столбцов;
}

Пример

Давайте с помощью свойства grid-template сделаем таблицу:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Пример

А теперь давайте зададим второму и третьему рядам одинаковую ширину, а каждому столбцу - различную ширину:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template: 60px 1fr 60px / 20% 1fr 15%;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 300px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Пример

А теперь в таблице из предыдущего примера сделаем верхний ряд шириной в две фракции, а первый столбец - в половину фракции:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Смотрите также