Как сделать поле 10х10 квадратов?

Question

[townee]

Добрый день! Хочу сделать поле 10х10 квадратов как на картинке, пробовал через сss, но как-то не получается красиво, большой отступ с одной из сторон, пытался сделать просто через float, подскажите пожалуйста, что бы сделать адаптивное поле 10х10 на ширину всего экрана, нужно использовать канвас или можно и через css все реализовать?

Comments

[Adamos]

Вам ведь нужно не только поле? Хорошо бы отталкиваться от того, что на нем будет происходить.
Тогда и определяться - обойтись CSS (если будут тупо графики), подключать canvas (для динамичного контента) или SVG (для малоподвижного и масштабируемого).

Answer 1

[Alexander Pushkarev]

Пример - https://codepen.io/AXP/pen/qoYPNb

Comments

[townee]

Большое спасибо за ответ, скажите пожалуйста, как сделать, что бы все квадраты помещались в окне экрана? Сейчас все круто, но квадраты не помещаются в экран, нужно скроллить

[WarriorKodeK]

townee, height таблице меньше сделайте.

[Alexander Pushkarev]

townee, пересохранил

Answer 2

[Даниил Попов]

размеры квадратиков задайте так:
width: 10vmin
hight: 10vmin
обертку во flex-box

Только я не понял вам квадраты или прямоугольники нужны?

Добавил пример для квадратов:
https://codepen.io/groog/pen/GxdMqv

Добавил пример для прямоугольников:
https://codepen.io/groog/pen/GxdMzd