Как сделать такую таблицу с номерами?

Question

[Денис Курочкин]

Как сделать правильно такую таблицу, чтобы и адаптивно, и красиво, и по центру всегда? Сделал на флексах, но при сужении экрана, когда квадратики уходят вниз, и справа остается некрасивое пустое место. Подскажите, в каком направлении копать.

Comments

[Ankhena]

Вариантов много
Например, на флексах
1. Считаете сколько должно быть блоков, задаете ширину в % (6.25%)
2. Делаете ячейки всегда квадратными https://jsfiddle.net/Ankhena/cLhxv7eq/
3. Границы задаете так: верхнюю и левую обертке, внутренним блокам нижние и правые.

При сужении экрана изменяете % ширины.

На гридах аналогично, например, grid-template-columns: repeat(16, 1fr); при уменьшении ширины изменяете количество столбцов.

Дальше с вашим неполучившимся кодом.

Answer 1

[coderxx]

Тут сам бог велел использовать CSS Grid Layout