АКЦИЯ: бесплатные месячные курсы по созданию сайтов
на выбор: верстка, JavaScript, PHP, Python или фреймворки. Сегодня последний день для записи! Жми!
224 of 313 menu
Бесплатный курс по выкладке сайтов на хостинг. Разбираем все нюансы! Начало 14 октября. Жми для записи!

Свойство grid-template

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

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

Синтаксис

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

Пример

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

<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> #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; }

:

Пример

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

<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> #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; }

:

Пример

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

<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> #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; }

:

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

  • свойство grid,
    которое задает сокращенную запись свойств столбцов и рядов
  • свойство grid-template-rows,
    которое задает количество и ширину рядов в гриде
  • свойство grid-template-columns,
    которое задает количество и ширину столбцов в гриде
byenru