Как перестроить / перераспределить макет CSS Grid в точках останова медиазапроса? - PullRequest
Новая
       78

Как перестроить / перераспределить макет CSS Grid в точках останова медиазапроса?

0 голосов
/ 10 октября 2019

Я составил макет сетки, который состоит из 3 столбцов в ширину и 3 строк в высоту: 

.home-works {
    padding: 30px;
    font-size: 1.2rem;

    display: grid;
    grid-template-columns: 2fr 2fr 2fr;
    grid-template-rows: 2fr 4fr 4fr;

    grid-gap: 10px;
}

Это дает мне ноль проблем при просмотре рабочего стола, но теперь мне нужно следить за этим. , когда порт представления прерывается, в данный момент я работаю с правилом max-width:768px. Итак, прямо сейчас, когда порт представления достигает максимальной ширины, любая команда CSS Grid, похоже, не имеет никакого эффекта или изменения. Я пытался использовать grid-row или grid-row-start grid-column или grid-row-start, но не повезло.

Это мой HTML-код для макета: 

<div class="home-works">
                <div class="head">
                    <h1>Let's stay connected!</h1>
                </div>
                <div class="col-menu">
                        <img class="image-home" src="img/profile-picture.png" width="50%">
                    <ul>
                        <li>home</li>
                        <li>about</li>
                        <li>contact</li>
                        <li>downloads</li>
                    </ul>
                </div>
                <div class="main-content">
                        <p>This is my website and I call it, the <em>"glassless window"</em>
                            Why? Because using the frame on your device (mobile, desktop or laptop) 
                            we are allowed to establish a connection thus enabling me to show you my
                            up and coming projects. </p>
                </div>
                        <div class="caption-object">
                                <p>I really wish you could <a class="drop-a-line-link" href="#">drop me a line</a> somewhere
                                    in the future!</p>
                        </div>
            </div>

И это CSSдля распространения: 

.head {
    grid-column: 1 / 4;
    text-align: center;
}

.col-menu {
    grid-column: 1;
    grid-row: 2 / 3;
}

.main-content {
    grid-column: 2 / 4;
    grid-row: 2 / 3;
}

.caption-object {
    grid-column: 3 / 4;
    grid-row: 3;
}

Я впервые работаю с медиа-запросами и CSS-сеткой, то есть впервые ввожу команду grid в набор правил медиа-запросов. Я проверил, произойдет ли это тоже, если я захочу изменить background-color: plum;, и это сработало. Я знаю о repeat(minmax()), но, честно говоря, я не знаю, как правильно добиться того же внешнего вида, или если бы он имел тот же «дизайн макета», потому что тогда мне пришлось бы удалить расположение строки и столбца сетки? Как я уже говорил, это мой первый раз, когда я использую CSS Grid с медиа-запросами, я приложил фото , спасибо!

Изначально я решил не включать его, потому что, похоже, ничего не работаеттак что у меня не было причин включать. 

@media only screen and (max-width: 768px) {
    .nav-items {
      flex-direction: column;
      align-items: center;
    }
    .navbar {
        height: 200px;
        padding-bottom: 20px;
    }
    .footer-link {
        align-self: center;
        left: 0;
        top: 0;
    }
    .main-container {
        flex-flow: column wrap;
        margin: 0 10px;
    }
    .drop-a-line-link {
        text-decoration: underline wavy;
    }

  }

Медиа-запрос

1 Ответ

0 голосов
/ 11 октября 2019

Чтобы ответить на мой собственный вопрос, это то, что я сделал и он доступен на MDN , нужно проверить тему «Переопределение сетки с помощью медиа-запросов».

Чтобы реорганизовать компоновку CSS Gridнужно настроить правило медиа-запроса (которое в этом случае у меня было другим, чем в архивах MDN, но как-то все еще работало), и там мне пришлось переназначить мой grid-template-areas, который был также , что я тожене хватало, я НЕ использовал области сетки, у меня были такие вещи, как grid-row или grid-columns. По-видимому, это очень важный фактор, который начинает действовать, когда мы находимся внутри нашего кода Media Query. Одна вещь, которую они отмечают как важную, при работе с grid-area - это то, что их нужно назначать, вне каких-либо команд Media Query, для покрытия только одной «строки» или одного «столбца», я полагаюзависит от вашей текущей команды grid-auto-flow, которая по умолчанию установлена ​​как строка при определении столбцов и строк

Итак, моя выглядит так: 

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(350px, auto);
    grid-template-areas: 
    "header"
    "menu"
    "main"
    "caption";

Поскольку я не определил никаких областей в моей предыдущей сетке, я бы никогда не заставил ее работать так, как я намеревался вести себя. Ну, а затем один раз в MQ вы назначаете сетку как можно лучше, но сначала вам нужно использовать от grid-template-areas до переназначить области, а также ваши столбцы, используя grid-template-columns, это зависит от вашего макета и размеров элементов или, в основном, от идеи, которая у вас была для сетки.

Итак, мой код Media Query закончилсявыглядит так: 

@media (min-width: 500px) {
    .home-works {
        grid-template-columns: 2fr 2fr 2fr;

        grid-template-areas: 
        "header header menu"
        ".      main main"
        ". .    caption";
    }
}

@media (min-width:700px) {
    .home-works {
        grid-template-areas:
        "header header header"
        "menu main main"
        ". .  caption";
    }
}

Важно: "."являются «пустым пространством», или «отрицательным пространством» или «пустыми ячейками».

...