The task is to draw a grid like a coordinate like on graphs (or graph paper, for example) in a background container like this . There is a div , its size in px initially unknown, but it is known that, suppose, the width is 30% of the width of the window (not the screen, that is, when the user div window, the width of the div also changes). His background should contain a grid of a previously known number of Х cells. Div can stretch, contract, the grid should change proportionally, and the number of cells should remain equal to Х Background picture - because in this div content will be placed on top of the grid.

Here there is a solution through the canvas , but the grid step is strictly defined there, so this option is not appropriate.

I tried to calculate the width of the cells based on the width of the div . However, how to solve the problem of resizing a div? The background should change proportionally, the number of cells remains the same, and the width-height of the cells, respectively, will be different.

  • Do you want to make a table? Those. use it as a substrate. - Aleksander K.
  • @AleksanderK. interesting option. And how can it be made a substrate? - Emm
  • Attached an example. - Aleksander K.

1 answer 1

Option using the table:

 html, body { height: 100%; margin: 0; font-family: sans-serif; } .graph { width: 30%; height: 30%; border: 1px solid gray; padding: 10px; position: relative; } .graph-grid { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-spacing: 0; z-index: -1; } .graph-grid td { border-left: 1px solid #eee; border-bottom: 1px solid #eee; } 
 <div class="graph"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <table class="graph-grid"> <tr><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td></tr> </table> </div>