Здравствуйте!
Помогите студенту разобраться с CSS Grid. Первый раз взялся верстать с гридами и появились вопросы:
1. Здесь (на тостере) прочитал, что задать фон (background) grid-ячейке (или набору ячеек) нельзя.
Задать фон нельзя элементу у которого указан
display: grid; или дочерним элементам по отношению к элементу у которого указан
display: grid;? Или в обоих случаях нельзя? И почему?
2. В Css Grid дочерние элементы не наследуют раскладку прародителя, и приходится делать что то типа такого:
<div class="conteiner">
<div class="header">
<h1 class="logo"></h1>
<form class="search"></form>
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
.conteiner
{
display: grid;
grid-template: 50px 1fr 50px / repeat(10, 1fr); /* Сетка страницы: 3 строки (1-50px, 3-50px, 2-все оставшееся пространство), 10 одинаковых столбцов*/
}
.header
{
grid-area: 1 / 1 / span 1 / span 10; /* Позиционирование шапки (начинается с первой строки первого столбца и занимает одну строку и 10 столбцов) */
display: grid;
grid-template: 50px / 2fr 8fr; /* Сетка для шапки: 1 строка в 50px, 2 столбца */
}
.logo
{
grid-area: 1 / 1 / span 1 / span 2; /* Позиционирование логотипа */
}
.search
{
grid-area: 1 / 3 / span 1 / span 8; /* Позиционирование формы поиска */
}
Т.е. я сначала задаю общую раскладку для страницы в классе
conteiner (шапка, контент, футер), а потом для позиционирования элементов (логотипа и поиска) в шапке задаю новую раскладку в классе
header.
И так приходится делать постоянно. Для позиционирования элементов внутри блока, приходится блоку задавать новую раскладку, а не пользоваться например родительской.
Правильно ли так делать? И есть ли другие способы?
Спасибо!
Простой
Простой
Простой