Creating a bootstrap-like container

Question

I am trying to build a container like bootstrap container that has padding from page sides.

Since I'm new in this topic, i really don't think this is the best way to create responsive and standard container.

i just want to know is there any other ways to do something like my project.

<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

this is how i created a responsive container with grid

/* 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>