Grid-tempate-areas для sass?
Как сделать grid-tempale-areas для sass? У меня есть следующий код
.cooperation_inner display: grid grid-template-areas: "coop-text coop-text coop-block" "coop-block coop-block coop-block" padding-top: 84px |
.cooperation_inner display: grid grid-template-areas: "coop-text coop-text coop-block" "coop-block coop-block coop-block" padding-top: 84px
Но он не работает так как должен, с чем это связано, и как написать его верно?
Дополнительно:
Как сделать grid-tempale-areas для sass?
Точно также как и в css.
Вы пытаетесь расположить блок зигзагом. Так не бывает. Блоки прямоугольные. (Даже если нам иногда кажется, что они круглые или ромбиками)
Область не может быть непрямоугольной
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для использования grid-template-areas в Sass, вам нужно создать переменную, содержащую ваш шаблон сетки, а затем использовать эту переменную в свойстве grid-template-areas вашего CSS.
Пример:
```html
$grid-template: "header header header"
"sidebar content content"
"footer footer footer";
.container {
display: grid;
grid-template-areas: $grid-template;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}
```
В данном примере мы создали переменную $grid-template, содержащую шаблон сетки с тремя строками и тремя колонками. Затем мы применили этот шаблон к элементу с классом .container, используя свойство grid-template-areas. Далее мы определили стили для элементов с классами .header, .sidebar, .content и .footer, указав им, в какой области сетки они должны размещаться с помощью свойства grid-area.
Таким образом, вы можете легко создавать и управлять макетами с помощью grid-template-areas в Sass. Не забывайте компилировать ваш Sass код в CSS перед использованием на вашем сайте.