Мне нужно сделать горизонтальную полосу прокрутки кнопок, как эта, только с HTML и CSS: 
После просмотра inte rnet для решения мой код выглядит так:
.myBtnContainer{
display: grid;
grid-gap: calc(var(--gutter) / 2);
grid-template-columns: repeat(6, calc(50% - var(--gutter) * 2));
grid-template-rows: minmax(150px, 1fr);
overflow-x: scroll;
scroll-snap-points-x: repeat(100vh);
scroll-snap-type: x mandatory;
}
.btn{
position:relative;
color: lightgrey;
text-transform: uppercase;
background: white;
padding: 1em;
border: 0.5em solid lightgrey;
border-radius: 6px;
display:inline-block;
transition: all 0.3s ease 0s;
scroll-snap-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.btn:hover{
color: grey;
border-radius: 50px;
border-color: grey;
transition: all 0.3s ease 0s;
}
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('all')"> Show all</button>
<button class="btn" onclick="filterSelection('nature')"> American</button>
<button class="btn" onclick="filterSelection('cars')"> Italian</button>
<button class="btn" onclick="filterSelection('people')"> Asian</button>
<button class="btn" onclick="filterSelection('people')"> Mexican</button>
<button class="btn" onclick="filterSelection('people')"> Romanian</button>
<button class="btn" onclick="filterSelection('people')"> Barbeque</button>
<button class="btn" onclick="filterSelection('people')"> Indian</button>
<button class="btn" onclick="filterSelection('people')"> Chinese</button>
<button class="btn" onclick="filterSelection('people')"> Mediterranean</button>
<button class="btn" onclick="filterSelection('people')">Desserts</button>
<button class="btn" onclick="filterSelection('people')"> Smoothies</button>
<button class="btn" onclick="filterSelection('people')"> Coffee</button>
</div>
myBtnContainer
находится в body
. Я где-то читал, что это то, что мешает scroll-snap-type: x mandatory;
работать, но я до сих пор не знаю, как это исправить. Я очень новичок в этом, поэтому любые советы приветствуются.