Если родительский элемент охватывает все столбцы сетки, возможно ли, чтобы дочерние элементы работали с сеткой?
У меня простой grid. Некоторые элементы (например, <footer>) охватывают все столбцы. Можно ли заставить дочерние элементы внутри нижнего колонтитула работать с той же базовой сеткой? Без настройки точно такой же сетки на родительском элементе?
main {
display: grid;
grid-template-columns: 1fr 1fr;
}
footer {
grid-column: 1 / -1; /* this gets the footer to span all columns */
}
footer { /* can this be avoided? */
display: grid;
grid-template-columns: 1fr 1fr;
}<main>
<footer>
<p>some text</p>
<p>some more text</p>
</footer>
</main>Почему в CSS дважды есть footer и почему -1;? Пожалуйста, уточните, что вы имеете в виду/хотите в качестве конечного результата под «дочерними элементами для работы с сеткой».
Эй, спасибо, не знал, что существует подсетка. Вы хотите «ответить» на этот пост?
Не редактируйте свой вопрос вместе с ответом. Создайте отдельный актуальный ответ, это разрешено
Ответы 1
подсетка — вот ответ.
Если [во вложенной сетке] вы устанавливаете значение subgrid в столбцах-шаблонах сетки, строках-шаблонах сетки или в обоих, вместо создания нового списка треков вложенная сетка использует треки, определенные в родительском элементе.
main {
display: grid;
grid-template-columns: 1fr 1fr;
}
footer {
grid-column: 1 / -1;
/* this gets the footer to span all columns */
display: grid;
grid-template-columns: subgrid;
}
p {
outline: 1px solid green;
}<main>
<footer>
<p>some text</p>
<p>some more text</p>
</footer>
</main>