html - 避免 HTML 网格中的无效 DIV

Question

目标是为更宽的屏幕插入侧边距，同时保持标题跨越整个宽度。

通常我们会写

.inner {
    margin: 0 5%;
}

获得这样的边距，但事实证明 HTML 网格非常灵活，它们可以通过死网格 DIV 实现侧边距。

但不知何故，使用死 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>

Answer 1

使用点 (.) 来声明 empty grid areas :

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>