Флакторы в сетке CSS GRID/Flexbox имеют противоречивые размеры (рендеринг) ⇐ Html

[Anonymous]

Я пытаюсь создать макет с флажками, используя CSS Grid и Flexbox, но флажки рендеринг с противоречивыми размерами в рендеринге Chrome или размытости в Firefox. Я хотел бы понять основную причину этой проблемы и как ее решить.

Код: Выделить всё

.form-filters-row {
display: flex;
font-size: 14px;
}

.checkboxes {
display: grid;
gap: 5px 10px;
}

.checkboxes > span {
display: flex;
align-items: center;
}


Category

Category 111
C2 & Category 2
34
Category 43423
Category 111
C2 & Category 2
34
Category 43423




In

All
B1
B2
B3



Current location

All
B1
B2
B3
B4





Customer

Private
Dealer
Agent
Company

chrome
firefox
https://jsfiddle.net/z6vghkqs/3/

Подробнее здесь: https://stackoverflow.com/questions/794 ... -rendering