@Ankozar

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

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

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

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

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

Пытался делать абсолютное позиционирование - в этом случае грид не считает header элементом первой строки, весь остальной контент "ныряет" под него.
  • Вопрос задан
  • 59 просмотров
Решения вопроса 1
Попробуйте
grid-column: 1 / -1;
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
SkiperX
@SkiperX Куратор тега CSS
в body 2 элемента

5ff55f7e7e5da751415503.jpeg

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

5ff55f0b6604f624400735.jpeg

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

5ff55f2f4fb8f342196871.jpeg

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

5ff55f3cb103b162010587.jpeg


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

<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>

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

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

Войти через центр авторизации
Похожие вопросы