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

Question

Ankozar @Ankozar

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

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

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

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

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

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

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

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>
Написано более трёх лет назад

Решения вопроса 1

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

Пригласить эксперта

Ответы на вопрос 1

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

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

HTML

+1 ещё

Простой
Как лучше сверстать элемент?
- 1 подписчик
- 8 часов назад
- 61 просмотр
1

ответ
JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 19 часов назад
- 92 просмотра
1

ответ
CSS

Простой
Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?
- 1 подписчик
- вчера
- 75 просмотров
0

ответов
JavaScript

+4 ещё

Сложный
Почему в WebSockets History в Burp Suite отображаются кракозябры?
- 1 подписчик
- вчера
- 86 просмотров
2

ответа
CSS

Простой
Как заменить плавно логотипы?
- 1 подписчик
- вчера
- 64 просмотра
1

ответ
JavaScript

Простой
Как выводить JS код?
- 2 подписчика
- вчера
- 1374 просмотра
1

ответ
JavaScript

Простой
Как заставить срабатывать trigger change в Select2?
- 1 подписчик
- 21 дек.
- 57 просмотров
0

ответов
JavaScript

Простой
Почему появляется ошибка Uncaught Reference?
- 1 подписчик
- 20 дек.
- 85 просмотров
2

ответа
JavaScript

Средний
Порождается ли событие в элементе или оно само по себе?
- 1 подписчик
- 20 дек.
- 99 просмотров
1

ответ
CSS

Средний
Как сделать сквозную нумерацию неупорядоченных списков?
- 1 подписчик
- 20 дек.
- 69 просмотров
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Верстка сайта в Tilda

23 дек. 2024, в 09:41

5000 руб./за проект

UI мобильной игры

23 дек. 2024, в 09:39

1000000 руб./за проект

Сборочный чертеж инженерная графика t-flex stm32f7

23 дек. 2024, в 09:33

3000 руб./за проект

Для чего 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 комментарий

Answer 2 · 2021-01-06 10:04:01

в body 2 элемента

делаем основную сетку

помещаем блоки в центральную колонку

делаем микросетку в блоках

Структуру вижу так

<div class="header"></div>
    <div class="content">
        <div class="row">
            <div class="col-left">
                <div class="aside-left"></div>
            </div>
            <div class="col-main">
                <div class="main">
                    <div class="filter">
                        <div class="row">
                            <div class="col-3">
                                <div class="input"></div>
                            </div>
                            <div class="col-3">
                                <div class="input"></div>
                            </div>
                            <div class="col-3">
                                <div class="input"></div>
                            </div>
                            <div class="col-3">
                                <div class="input"></div>
                            </div>
                        </div>
                        <div class="btn"></div>
                    </div>
                    <div class="news-line"></div>
                    <div class="news">
                        <div class="row">
                            <div class="col-4">
                                <div class="news-card"></div>
                            </div>
                            <div class="col-4">
                                <div class="news-card"></div>
                            </div>
                            <div class="col-4">
                                <div class="news-card"></div>
                            </div>
                        </div>
                    </div>
                    <div class="news-line"></div>
                    <div class="news">
                        <div class="row">
                            <div class="col-4">
                                <div class="news-card"></div>
                            </div>
                            <div class="col-4">
                                <div class="news-card"></div>
                            </div>
                            <div class="col-4">
                                <div class="news-card"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-right">
                <div class="aside-right"></div>
            </div>
        </div>
    </div>

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

Войдите, чтобы написать ответ

Минуточку внимания

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