
.tab-bar {
display: grid;
grid-auto-flow: column;
column-gap: 5px;
margin:10px
}
.tab-bar>div {
border:1px solid red;
text-align:center;
padding: 5px;
}
.tab-bar.bar1 { }
.tab-bar.bar2 {
grid-auto-columns: max-content;
}
.tab-bar.bar3 {
grid-auto-columns: max-content;
justify-content:center;
}<div class="tab-bar bar1"> <div>Alice</div> <div>Bob</div> <div>C</div> <div>D</div> <div>E</div> <div>F</div> </div> <div class="tab-bar bar2"> <div>Alice</div> <div>Bob</div> <div>C</div> <div>D</div> <div>E</div> <div>F</div> </div> <div class="tab-bar bar3"> <div>Alice</div> <div>Bob</div> <div>C</div> <div>D</div> <div>E</div> <div>F</div> </div>
632900cookie-checkCSS Grid Auto Flow (Variable columns)