Подходящий заполнитель полей для адаптивного дизайна сетки при более широкой ширине - PullRequest
Новая
       22

Подходящий заполнитель полей для адаптивного дизайна сетки при более широкой ширине

0 голосов
/ 04 июля 2019

Я "работаю с одной из многих фреймворков или сеточных систем, размечая сайты на гибкой сетке из 12 столбцов" и с тех пор, как после нескольких месяцев использования Bootstrap я не стал ни подмастерьем, ни ученикомЯ экспериментирую с использованием только сеток и медиа-запросов для размещения сайта.Следующий код представляет собой упрощение дизайна, предлагаемого в хорошем руководстве по URL-адресу, на который только что ссылались, также с использованием подсказок от вдохновляющей Рэйчел Эндрю https://gridbyexample.com. 

.box {
    background-color: #ddd; color: #000; padding: 20px;
}
.main-head { grid-area: hd; }
.content { grid-area: ct; }
.main-nav { grid-area: nv; }
.wrapper {
    display: grid;
    grid-gap: 2px;
    grid-template-areas: 
        "nv"
        "ct";
}
@media (min-width: 600px) {
    .wrapper {
        grid-template-columns: 1fr 3fr;
        grid-template-areas: 
            "nv nv"
            "ct ct";
    }
    nav ul {
        display: flex;
        justify-content: space-between;
    }
}        
@media (min-width: 1000px) {
    .wrapper {
        grid-template-columns: 1fr 4fr 1fr;
        grid-template-areas: 
            "nv ct ct"
            "nv ct ct";
    }
    nav ul {
        flex-direction: column;
    }
}
@media (min-width: 1200px) {
    .wrapper {
        grid-template-columns: 1fr 1fr 4fr 1fr 1fr;
        grid-template-areas: 
            ". nv ct ct ."
            ". nv ct ct .";
    }
    nav ul {
        flex-direction: column;
    }
}
<div class="wrapper">
    <nav class="box main-nav">
        <ul>
            <li><a href="">Nav 1</a></li>
            <li><a href="">Nav 2</a></li>
            <li><a href="">Nav 3</a></li>
        </ul>
    </nav>
    <article class="box content">
        <h1>Main</h1>
    </article> 
</div>

Приведенный выше код пытается симулировать вставку двух боковых полей, когда окно превышает некоторую (1200) ширину, но использование периода для заполнения grid-template-area выглядит как обман,Есть ли более естественный способ вставить эти поля?

1 Ответ

0 голосов
/ 04 июля 2019

Вы можете просто использовать margin как и везде, нет? Конечно, если вы хотите, чтобы пространство по сторонам было ровно 1fr, имеет смысл использовать подход с пустыми ячейками с .

.box {
    background-color: #ddd; color: #000; padding: 20px;
}
.main-head { grid-area: hd; }
.content { grid-area: ct; }
.main-nav { grid-area: nv; }
.wrapper {
    display: grid;
    grid-gap: 2px;
    grid-template-areas: 
        "nv"
        "ct";
    transition: margin 0.5s ease-in-out;
}
@media (min-width: 600px) {
    .wrapper {
        grid-template-columns: 1fr 3fr;
        grid-template-areas: 
            "nv nv"
            "ct ct";
    }
    nav ul {
        display: flex;
        justify-content: space-between;
    }
}        
@media (min-width: 1000px) {
    .wrapper {
        grid-template-columns: 1fr 4fr 1fr;
        grid-template-areas: 
            "nv ct ct"
            "nv ct ct";
    }
    nav ul {
        flex-direction: column;
    }
}
@media (min-width: 1200px) {
    .wrapper {
        grid-template-columns: 1fr 4fr 1fr;
        grid-template-areas: 
            "nv ct ct"
            "nv ct ct";
        margin: 0 5%;
    }
    nav ul {
        flex-direction: column;
    }
}
<div class="wrapper">
    <nav class="box main-nav">
        <ul>
            <li><a href="">Nav 1</a></li>
            <li><a href="">Nav 2</a></li>
            <li><a href="">Nav 3</a></li>
        </ul>
    </nav>
    <article class="box content">
        <h1>Main</h1>
    </article> 
</div>
...