Css и column-gap

Question

Друзья, добрый день. Есть верстка с использованием свойства column-gap у flex.

codepen.io/devilar/pen/jOVpqKq

Почему блоки не становятся в 5 рядочков, как и должны? Свойство box-sizing:border-box на месте, чтобы исключить все бордеры и прочие приблуды.

Все перепробовал - бесполезно.

Я конечно могу накостылять и изменить длину внутренних блоков:

width: calc(100%/5 - 5px);

Но подразумеваю что это бред и так работать не должно.

Мало того, в этом случае если накостылять, если присмотреться, блоки не занимают всей ширины родителя. С краю остается несколько пикселей: https://imgur.com/a/8Y7e4hi

Выручайте, братцы!

Answer 1

Думаю вы хотите так.

.dv-valute-changer-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    box-sizing: border-box;
}
.dv-valute-changer-container>div {
    background: silver;
    color: white;
    cursor: pointer;
    box-sizing: border-box;
}

<div class="dv-valute-changer-container"><div class="">GBP</div><div class="">HKD</div><div class="">IDR</div><div class="">ILS</div><div class="">DKK</div><div class="">INR</div><div class="">CHF</div><div class="">MXN</div><div class="">CZK</div><div class="">SGD</div><div class="">THB</div><div class="">HRK</div><div class="">EUR</div><div class="">MYR</div><div class="">NOK</div><div class="">CNY</div><div class="">BGN</div><div class="">PHP</div><div class="">PLN</div><div class="">ZAR</div><div class="">CAD</div><div class="">ISK</div><div class="">BRL</div><div class="">RON</div><div class="">NZD</div><div class="">TRY</div><div class="">JPY</div><div class="">RUB</div><div class="">KRW</div><div class="active">USD</div><div class="">AUD</div><div class="">HUF</div><div class="">SEK</div></div>

БЛОГ НА HUSL

Css и column-gap

Ответы (1 шт):