Хороший UI

В такой ситуации думают обычно над группировкой меню, либо скрывают часть меню в "еще N пунктов"

Вот пример как леруа справляется с похожей ситуацией, у них вообще эти техники скомбинированы.

Если я правильно понял то что то вроде этого - https://codepen.io/you_web/pen/YLRLKO
Но насколько я помню, не рекомендуется кастомная стилизация чекбоксов.

Алгоритм по данному примеру полностью описывать не буду, по коду будет видно, скажу лишь смысл:
1)Скрываешь дефолтный чекбокс
2) Создаешь элемент который будет его заменять
3) Задаешь ему нужные стили + позиционирование
4) Используя псевдокласс (в данном случае :checked) + псевдоэлемент (при желании можно и без него), задаешь кастомный стиль.

Размеры, бэкграунд и т.д меняешь как тебе нужно

В данном случае очень удобно будет позиционировать через флексбоксы, но надо повернуть главную ось.

1) Задаём родителю, в данном случае диву display: flex;
2) Поворачиваем главную ось с помощью flex-direction: column;
3) Задаем равномерное выравнивание контента justify-content: space-around либо justify-content: space-around;
space-around делает отступы сверху и с низу, а space-between прижимает крайние элементы к краям родителя
4) Так как мы повернули главную ось, то можно задать горизонтальную центровку через align-items: center;

Гототово :)

Пример - https://codepen.io/you_web/pen/JveOQM

Это реализация хороша тем, что сколько бы элементов в родительский флекс-контейнер вы не внесли, они автоматически будут выравниваться