时间戳

首页 > 解决方案 > 用于响应式网格设计的更宽宽度的适当边距填充

html - 用于响应式网格设计的更宽宽度的适当边距填充

问题描述

我一直在“使用在 12 列灵活网格上布置站点的众多框架或网格系统之一”，自从使用 Bootstrap 几个月后，我既不是熟练工也不是学徒，我正在尝试只使用网格以及用于布局网站的媒体查询。以下代码是通过刚刚引用的 URL 上的漂亮教程提供的设计简化，还使用了来自 Rachel Andrew 的启发性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似乎是作弊。有没有更自然的方法来插入这些边距？

标签： htmlcssmedia-queriescss-grid

解决方案

您可以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>

推荐阅读