创建容器的最佳方法

Question

我正在尝试构建一个类似引导容器的容器，该容器的页面两侧都有填充。


由于我是本主题的新手，所以我真的不认为这是创建响应式和标准容器的最佳方法。

我只想知道还有其他方法可以做类似我的项目的事情。

谢谢。

<div class="container">
        <div>item 1</div>
        <div>item 2</div>
        <div>item 3</div>
    </div>

.container{
    width: 75%;
    height: auto;
    background: red;
    margin: 0 auto;
    padding: 1px;
}

Answer 1

这就是我使用网格创建响应式容器的方式

/* white space from sides */
.container {
    display: grid;
    grid-template-columns: 80px 1fr 80px;
    grid-gap: 2px;
}
.container > .grid-system {
    grid-column: 2;
    min-width: 0;
}

/* inner grid 12 column */
.grid-system {
    display: grid;
    grid-template-columns: repeat(12,1fr);
    grid-gap: 10px;
    background: green;
}
.grid-system > div{
    background: red;
    grid-column: 1;
    padding: 12px 16px;
    text-align: center;
    color: white;
}

<div class="container">
        <div class="grid-system">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </div>