I'm going to create next layout and convert it to PDF with Puppeteer:
This is a grid with square cells and numbers above them:
- number above first cell should be left aligned (i.e. 0s on the attached image);
- number above last cell should be right aligned (i.e. 20s on the attached image);
- numbers 10,11,12 and 10,11,12,13,14 should be aligned between two neighbors cells.
I ended up with:
.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; } }}<div class="wrapper"><div class="ruler-x"><p>10</p><p>20</p><p>30</p><p>40</p></div><div class="container"><div class="ruler-y"><p>10</p><p>20</p><p>30</p><p>40</p><p>50</p><p>60</p></div><div class="square"><div class="flex-container"><div class="flex-item" style="background-color: red"></div><div class="flex-item" style="background-color: green"></div><div class="flex-item" style="background-color: blue"></div><div class="flex-item" style="background-color: pink"></div></div><div class="flex-container"><div class="flex-item" style="background-color: pink"></div><div class="flex-item" style="background-color: red"></div><div class="flex-item" style="background-color: green"></div><div class="flex-item" style="background-color: blue"></div></div><div class="flex-container"><div class="flex-item" style="background-color: blue"></div><div class="flex-item" style="background-color: pink"></div><div class="flex-item" style="background-color: red"></div><div class="flex-item" style="background-color: green"></div></div><div class="flex-container"><div class="flex-item" style="background-color: pink"></div><div class="flex-item" style="background-color: blue"></div><div class="flex-item" style="background-color: green"></div><div class="flex-item" style="background-color: red"></div></div><div class="flex-container"><div class="flex-item" style="background-color: blue"></div><div class="flex-item" style="background-color: green"></div><div class="flex-item" style="background-color: pink"></div><div class="flex-item" style="background-color: tan"></div></div><div class="flex-container"><div class="flex-item" style="background-color: pink"></div><div class="flex-item" style="background-color: red"></div><div class="flex-item" style="background-color: green"></div><div class="flex-item" style="background-color: blue"></div></div> </div></div></div>Fiddle with this snippet: https://jsfiddle.net/rce6ns09/