Предотвращение мертвых DIVs в сетке HTML - PullRequest
Новая
       22

Предотвращение мертвых DIVs в сетке HTML

0 голосов
/ 09 ноября 2019

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

side margins through dead DIVs

Обычно мы пишем 

.inner {
    margin: 0 5%;
}

, чтобы получить такие поля, но оказывается, что HTML-сетки настолько гибки, что делают возможными боковые поля через DIVs с мертвой сеткой.

Но каким-то образом использование мертвых DIV кажется не совсем правильным,Есть ли способ получить боковые поля в сетке. Я вижу, как это можно сделать с помощью смеси flex и grid. Здесь мне интересно, можно ли это сделать только с помощью сеток. 

body {
    height: 100vh; margin: 0; display: flex;
}
.outer{
    margin: 5px; border: 5px; padding: 5px;
    display: flex;
    flex-grow: 1;
}
.inner {
    flex-grow: 1;
    margin: 5px; border: 5px; padding: 5px; grid-gap: 5px;
    display: grid;
    grid-template-rows: 100px 5fr 100px;
    grid-template-columns: 1fr;
    grid-template-areas: "header" "content" "side";
}
@media screen and (min-width: 600px) {
    .inner {
        grid-template-rows: 100px 6fr;
        grid-template-columns: 5fr 100px;
        grid-template-areas:
            "header header"
            "content side";
    }
}
@media screen and (min-width: 800px) {
    .inner {
        grid-template-rows:    100px 6fr;
        grid-template-columns: 1fr 5fr 100px 1fr;
        grid-template-areas:
            "header header header header"
            "leftmargin content side rightmargin";
    }
}
.box {
    padding: 10px; margin: 5px;
    border: 5px solid #444;
    background-color: #eee;
    font-size: 150%;
    position: relative;
}
.header      { grid-area: header;  }
.content     { grid-area: content; }
.side        { grid-area: side;    }
.leftmargin  { grid-area: leftmargin; }
.rightmargin { grid-area: rightmargin; }
<div class="outer">
    <div class="inner">
        <div class="box header">Header</div>
        <div class="box content">Content</div>
        <div class="box side">Side</div>
    </div>
</div>

1 Ответ

1 голос
/ 09 ноября 2019

Используйте точки (.) для объявления пустых областей сетки : 

grid-template-areas:
    "header header header header"
    ". content side .";

Пример: 

body {
    height: 100vh; 
    margin: 10px;
}

.inner {
    display: grid;
    grid-template-rows: 100px 5fr 100px;
    grid-template-columns: 1fr;
    grid-template-areas: "header" "content" "side";
    grid-gap: 5px;
}
@media screen and (min-width: 600px) {
    .inner {
        grid-template-rows: 100px 6fr;
        grid-template-columns: 5fr 100px;
        grid-template-areas:
            "header header"
            "content side";
    }
}
@media screen and (min-width: 800px) {
    .inner {
        grid-template-rows:    100px 6fr;
        grid-template-columns: 5% 5fr 100px 5%;
        grid-template-areas:
            "header header header header"
            ". content side .";
    }
}
.box {
    padding: 10px; margin: 5px;
    border: 5px solid #444;
    background-color: #eee;
    font-size: 150%;
    position: relative;
}
.header      { grid-area: header;  }
.content     { grid-area: content; }
.side        { grid-area: side;    }
<div class="inner">
    <div class="box header">Header</div>
    <div class="box content">Content</div>
    <div class="box side">Side</div>
</div>
...