Можно ли сделать так, чтобы элемент dom растягивался на всю ширину grid родителя, не зависимо от количества колонок?

Question

Ankozar @Ankozar

Можно ли сделать так, чтобы элемент dom растягивался на всю ширину grid родителя, не зависимо от количества колонок?

На сайте, в зависимости от устройства, body делится на 1 или 3 грид-колонки.
Header должен растягиваться на всю ширину body.

Изначально в body 3 колонки.
Если устройство мобильное, то колонка одна.

Сейчас с помощью медиа-запросов меняю grid-column у header (1/4 или 1/2).

Можно ли выставить параметры header так, чтобы не нужно было его медиа менять?

Пытался делать абсолютное позиционирование - в этом случае грид не считает header элементом первой строки, весь остальной контент "ныряет" под него.

Вопрос задан более трёх лет назад
126 просмотров

4 комментария

Подписаться 1 Простой 4 комментария

Алекс Глебов @SkiperX Куратор тега CSS

Для чего header в этой сетке? почему не сделать его display: block, и он будет на всю ширину, а следующим блоком сетку с 3мя колонками?

Написано более трёх лет назад
Ankozar @Ankozar Автор вопроса

Алекс Глебов, у меня в боди ещё три блока: боковые правый и левый, а также центральный. Как я понимаю, эту конструкцию удобнее сеткой расставить. Хотя. может, я и не прав. Но зачем тогда сетка?

И такая ситуация у меня повторяется. В центральном блоке тоже есть "верхний" элемент и есть "нижние". Тоже нужно чтобы "верхний" был на всю ширину блока.

Написано более трёх лет назад
Алекс Глебов @SkiperX Куратор тега CSS

Но зачем тогда сетка?

grid для сложных сеток, то что можно сделать на block или flex делайте без grid.
Делите страницу сначала на прямоугольники на всю ширину страницы, потом внутри делайте колонки на флексах, или сложную сетку на гридах.
Без скриншота конкретно не ответить.

Написано более трёх лет назад
Ankozar @Ankozar Автор вопроса
Алекс Глебов, выглядит это у меня вот так.
На дизайн прошу не обращать внимания. Я самостоятельно учу веб-программирование, сайт делаю полностью сам, для тренировки.

Блок с названием и есть header.
Структура:

<body> <header>...</header> <asideLeft>...</asideLeft> <main>...</main> <asideRigth>...</asideRigth> </body>
Написано более трёх лет назад

Для чего header в этой сетке? почему не сделать его display: block, и он будет на всю ширину, а следующим блоком сетку с 3мя колонками?
Алекс Глебов, у меня в боди ещё три блока: боковые правый и левый, а также центральный. Как я понимаю, эту конструкцию удобнее сеткой расставить. Хотя. может, я и не прав. Но зачем тогда сетка?

И такая ситуация у меня повторяется. В центральном блоке тоже есть "верхний" элемент и есть "нижние". Тоже нужно чтобы "верхний" был на всю ширину блока.
Но зачем тогда сетка?

grid для сложных сеток, то что можно сделать на block или flex делайте без grid.
Делите страницу сначала на прямоугольники на всю ширину страницы, потом внутри делайте колонки на флексах, или сложную сетку на гридах.
Без скриншота конкретно не ответить.
Алекс Глебов, выглядит это у меня вот так.
На дизайн прошу не обращать внимания. Я самостоятельно учу веб-программирование, сайт делаю полностью сам, для тренировки.

Блок с названием и есть header.
Структура:

<body> <header>...</header> <asideLeft>...</asideLeft> <main>...</main> <asideRigth>...</asideRigth> </body>

Answer 1 · 2021-01-06 09:38:49

Тимур Худиев @t_khudiyev

Попробуйте
grid-column: 1 / -1;

Ответ написан более трёх лет назад

1 комментарий

Можно ли сделать так, чтобы элемент dom растягивался на всю ширину grid родителя, не зависимо от количества колонок?

Войдите на сайт