Шпаргалка, grid-template-areas

Свойство grid-template-areas в CSS Grid позволяет вам задавать именованные области для сетки, что упрощает размещение элементов и делает код более читаемым и понятным. С помощью этого свойства вы можете определить, как различные элементы будут располагаться в сетке, используя текстовые метки для указания областей.

Основные моменты о grid-template-areas

1. Определение областей:

   • Вы задаете области сетки с помощью строк, в которых каждое имя области обозначает отдельный элемент. Например:
     PHPКопировать

     <code><span class="hljs-selector-class">.grid</span> {
         <span class="hljs-attribute">display</span>: grid;
         <span class="hljs-attribute">grid-template-areas</span>: 
             <span class="hljs-string">"header header header"</span>
             <span class="hljs-string">"sidebar content content"</span>
             <span class="hljs-string">"footer footer footer"</span>;
     }
     </code>

   • В этом примере у нас есть три области: header, sidebar, content и footer.

2. Синтаксис:

   • Каждая строка в grid-template-areas представляет собой строку в сетке. Имена областей разделяются пробелами. Если область занимает несколько колонок, вы можете повторить имя области.
   • Пустые области можно обозначить с помощью точки .:
     PHPКопировать

     <code><span class="hljs-attribute">grid-template-areas</span>: 
         <span class="hljs-string">"header header header"</span>
         <span class="hljs-string">"sidebar . content"</span>
         <span class="hljs-string">"footer footer footer"</span>;
     </code>

   • Здесь sidebar занимает первую колонку, а вторая колонка остается пустой.

3. Применение именованных областей:

   • После определения областей вы можете назначить их элементам с помощью свойства grid-area:
     PHPКопировать

     <code><span class="hljs-selector-class">.header</span> {
         <span class="hljs-attribute">grid-area</span>: header;
     }
     
     <span class="hljs-selector-class">.sidebar</span> {
         <span class="hljs-attribute">grid-area</span>: sidebar;
     }
     
     <span class="hljs-selector-class">.content</span> {
         <span class="hljs-attribute">grid-area</span>: content;
     }
     
     <span class="hljs-selector-class">.footer</span> {
         <span class="hljs-attribute">grid-area</span>: footer;
     }
     </code>

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

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

     PHPКопировать

     <code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"grid"</span>></span>
         <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"header"</span>></span>Header<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
         <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sidebar"</span>></span>Sidebar<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
         <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content"</span>></span>Content<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
         <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"footer"</span>></span>Footer<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
     <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
     </code>

     PHPКопировать

     <code><span class="hljs-selector-class">.grid</span> {
         <span class="hljs-attribute">display</span>: grid;
         <span class="hljs-attribute">grid-template-areas</span>: 
             <span class="hljs-string">"header header header"</span>
             <span class="hljs-string">"sidebar content content"</span>
             <span class="hljs-string">"footer footer footer"</span>;
         <span class="hljs-attribute">gap</span>: <span class="hljs-number">10px</span>; <span class="hljs-comment">/* Пробел между ячейками */</span>
     }
     
     <span class="hljs-selector-class">.header</span> {
         <span class="hljs-attribute">grid-area</span>: header;
         <span class="hljs-attribute">background</span>: lightblue;
     }
     
     <span class="hljs-selector-class">.sidebar</span> {
         <span class="hljs-attribute">grid-area</span>: sidebar;
         <span class="hljs-attribute">background</span>: lightgreen;
     }
     
     <span class="hljs-selector-class">.content</span> {
         <span class="hljs-attribute">grid-area</span>: content;
         <span class="hljs-attribute">background</span>: lightcoral;
     }
     
     <span class="hljs-selector-class">.footer</span> {
         <span class="hljs-attribute">grid-area</span>: footer;
         <span class="hljs-attribute">background</span>: lightgoldenrodyellow;
     }
     </code>

Использование grid-template-areas делает процесс проектирования макетов более интуитивным и визуально понятным. Это особенно полезно при работе с отзывчивыми дизайнами, где вы можете легко изменять расположение элементов, просто изменяя текстовые метки.