Невозможно изменить размер сетки 1/6 css на сетку 2/2 css с помощью медиазапроса - PullRequest
Новая
       18

Невозможно изменить размер сетки 1/6 css на сетку 2/2 css с помощью медиазапроса

0 голосов
/ 22 января 2020

Я строю нижний колонтитул, который должен иметь:

  • 4x1 сетка на маленьком экране
  • 2x2 сетку на среднем экране
  • 1x4 сетка на самый большой экран

Я успешен с маленьким и большим дизайном, однако и не могу найти способ изменить сетку для средних экранов.

Где я ошибаюсь?

Html как показано ниже: 

<div class="parent">
    <b></b>
    <div class="intro">
        Some content goes here
    </div>
    <div class="col1">
        Some content goes here
    </div>
    <div class="col2">
        Some content goes here
    </div>
    <div class="col3">
        Some content goes here
    </div>
    <b></b>
</div>

Мой CSS код указан ниже: 

.parent {
    display: grid;
    grid-template-rows: repeat(6, max-content);
    grid-template-areas:
                    '.'
                    'intro'
                    'col1'
                    'col2'
                    'col3'
                    '.';

    @media screen and (min-width: 400px) and (max-width: 599px) {
        grid-template-columns: 1fr 150px 150px 1fr;
        //grid-template-rows: auto auto;
        grid-template-areas:
                      '. intro col1 .'
                      '. col2  col3 .';
    }

    @media screen and (min-width: 600px) {
        grid-template-columns: 1fr repeat(4, minmax(50ch, 70ch)) 1fr;
        grid-template-areas: '. intro col1 col2 col3 .';
    }
}

1 Ответ

0 голосов
/ 22 января 2020

Похоже, что в данном конкретном случае, когда сетка из 1 строки с пустыми областями преобразуется в сетку из 2 строк с пустыми областями, дочерние элементы должны быть явно назначены с именами областей. В противном случае содержимое не будет отображаться должным образом. 

.intro { grid-area: intro;}
.col1 { grid-area: col1;}
.col2 { grid-area: col2;}
.col3 { grid-area: col3;}
...