<ul class="grid">
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li>Пункт 3</li>
    <li>Пункт 4</li>
    <li>Пункт 5</li>
    <li>Пункт 6</li>
  <li>Пункт 7</li>
</ul>

body, ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.grid {
    width: 100%;
    background-color: #F00;
    height: 40px;
    display: grid;
    grid-auto-columns: minmax(100px, 20%);
    grid-auto-flow: column;
}

.grid > li {
    background-color: rgba(0, 0, 0, 0.3);
    line-height: 40px;
    text-align: center;
    white-space: nowrap;
}

.grid > li:hover {
    background-color: rgba(0, 0, 0, 0.5);
}