THEMEWP.RU

.element {
    grid-area: имя_области;
}

Многоячеечные элементы:

• Вы также можете использовать grid-area для задания элементов, которые занимают несколько ячеек. Например:

  .large-item {
      grid-area: 1 / 1 / 3 / 3; /* row-start / column-start / row-end / column-end */
  }
  

• Это означает, что элемент начнется с первой строки и первой колонки и займет до третьей строки и третьей колонки.

Пример использования:

• Вот пример, который демонстрирует использование grid-area в контексте сетки:

  <div class="grid">
      <div class="header">Header</div>
      <div class="sidebar">Sidebar</div>
      <div class="content">Content</div>
      <div class="footer">Footer</div>
  </div>
  

  .grid {
      display: grid;
      grid-template-areas: 
          "header header header"
          "sidebar content content"
          "footer footer footer";
      gap: 10px; /* Пробел между ячейками */
  }
  
  .header {
      grid-area: header;
      background: lightblue;
  }
  
  .sidebar {
      grid-area: sidebar;
      background: lightgreen;
  }
  
  .content {
      grid-area: content;
      background: lightcoral;
  }
  
  .footer {
      grid-area: footer;
      background: lightgoldenrodyellow;
  }