How to design a group of object

November 6, 2021

I want to make a group of buttons or spans that always fit in 6 places of screen (sorry I draw it not really straight). Thanks for your helping first.

>Solution :

.row__main{
    max-width:280px;
    margin:0 auto;
    content:"";
    display: block;
    clear:both;
    height:110px;
    padding:0 15px 0 15px;
    border: 1px solid black;
}

[class^="col-"]{
    float:left;

}
[class^="col-"]:not(:last-child){
    margin-right: 60px;
}

.col-1-of-3{
    margin-top:23px;
    width:calc((100% - 2*#{60px})/3);

}

<div class="row__main">
<div class="row-1">
    <div class="col-1-of-3"><button>button</button></div>
    <div class="col-1-of-3"><button>button</button></div>
    <div class="col-1-of-3"><button>button</button></div>
</div>
<div class="row-1">
    <div class="col-1-of-3"><button>button</button></div>
    <div class="col-1-of-3"><button>button</button></div>
    <div class="col-1-of-3"><button>button</button></div>
</div>
</div>