Шпаргалка. Основные моменты о .grid-area

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

Основные моменты о .grid-area

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

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

Например:

PHP

<code class="language-css">
.grid {
    display: grid;
    grid-template-areas: 
       "header header header"
        "sidebar content content"
       "footer footer footer";
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

.footer {
    grid-area: footer;
}
</code>

Синтаксис:

Синтаксис для использования grid-area выглядит так:

PHP

<code><span class="hljs-selector-class">.element</span> {
    <span class="hljs-attribute">grid-area</span>: имя_области;
}
</code>

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

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

PHP

<code><span class="hljs-selector-class">.large-item</span> {
    <span class="hljs-attribute">grid-area</span>: <span class="hljs-number">1</span> / <span class="hljs-number">1</span> / <span class="hljs-number">3</span> / <span class="hljs-number">3</span>; <span class="hljs-comment">/* row-start / column-start / row-end / column-end */</span>
}
</code>

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

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

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

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-area делает ваш CSS более читаемым и управляемым, особенно при работе с сложными макетами.

Шпаргалка. Основные моменты о .grid-area

Вам также может понравиться

Шпаргалка классов для сетки (grid)

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