Создайте макет сетки с квадратными ячейками ⇐ CSS

[Anonymous]

Я собираюсь создать следующий макет и преобразовать его в PDF с помощью Puppeteer:

Это сетка с квадратными ячейками и цифрами над ними:

• число над первой ячейкой должно быть выровнено по левому краю (т. е. 0 на прикрепленном изображении). );
• число над последней ячейкой должно быть выровнено по правому краю (т. е. 20 на прикрепленном изображении);
• цифры 10,11,12 и 10, 11,12,13,14 должны быть выровнены между двумя соседними ячейками.

В итоге у меня получилось:

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

.wrapper {
width: 640px;

.ruler-x {
margin-left: 30px;
display: flex;

p {
margin: 0px;
padding: 0px;
flex: 1;
text-align: center;
}
}

.container {
display:flex;
}

.square {
width: 640px;
}

.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
justify-content: space-around;

.flex-item {
color: white;
font-weight: bold;
font-size: 1.5em;
text-align: center;
flex: 1 0 auto;
height:auto;

&::before {
content: '';
float: left;
padding-top:100%;
}
}
}

.ruler-y {

width: 30px;
padding-right: 3px;
display: flex;
flex-direction: column;

p {
text-align: right;

margin: 0px;
padding: 0px;
flex: 1;

align-content: center;
}
}
}

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

10

20

30

40


10

20

30

40

50

60

Поиграйтесь с этим фрагментом: https://jsfiddle.net/rce6ns09/

Подробнее здесь: https://stackoverflow.com/questions/786 ... uare-cells