grid-area

Двуличное свойство 🧐, которое может как указывать элементу, какую из именованных областей ему нужно занять, так и служить шорткатом для одновременного указания значений для четырёх свойств: grid-column-start, grid-column-end, grid-row-start и grid-row-end.

Пример с указанием на именованную область: блок item1 займёт область content внутри грид-сетки.

        
          
          .item1 {  grid-area: content;}
          .item1 {
  grid-area: content;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

А теперь пример с указанием всех четырёх значений в строку. При таком указании значений есть скользкое место: значения указываются в следующем порядке row-start / column-start / row-end / column-end. То есть сначала указываем оба начала, а потом оба конца.

        
          
          .item2 {  grid-area: 1 / col4-start / last-line / 6;}
          .item2 {
  grid-area: 1 / col4-start / last-line / 6;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Важно указывать значения в правильном порядке. Первая пара значений относится к начальной позиции: первое для grid-row-start, второе для grid-column-start. Вторая пара значений отвечает за конечные позиции: третье для grid-row-end, четвёртое для grid-column-end.

Используйте доступные значения свойств grid-column-start, grid-column-end, grid-row-start и grid-row-end, разделяя их слэшем.

Или напишите ключевое слово, указывающее на именованную область внутри грид-раскладки.