Tell me, please, how to make such a “pattern”:

Grid and blocks

while the functional unit is a square □ , say, 17 × 17px with two diagonals × and two median perpendiculars + (highlighted in red in the image).

You need to build a similar unit with CSS, jQuery (?), And then fill it up, but it should be all straight.

How do I imagine this:

  1. so that the initial width of the window is determined, and it was considered how much approximately squares can climb ( q=округлить в большую сторону(vw/17px) ), then the maximum possible number of solid squares in a row across the width of the viewport n :
    • those. if the last square in the row goes beyond the edge of the viewport, say,> 75%, then the size of each square slightly increases, so that 100% of the width of the last square goes beyond the boundaries of the viewport (this square can be removed), eventually the visible row will turn out n=q-1 ;
    • and if this value is in the vicinity of ≈50% (i.e. from 50 ± 25% of the width of the square), then it is pulled up to the middle, in the end you get a series of something like n=q∓0.5 ;
    • if the protruding edge of the viewport is <25%, then the size of all squares is reduced so that 0% extends beyond the edge of the viewport; as a result, the visible row will turn out to be n=q' ;

  1. also the size of the resulting square would be transferred and served as the denominator to the size of all the blocks (as if becoming a unit of measure, let's call it sqar ). So, for example, I could assign which property to the div:

    {top: 2sqar; left: 2sqar; width: 8sqar; height: 2sqar;} {top: 2sqar; left: 2sqar; width: 8sqar; height: 2sqar;} ;

  2. after the size of one square was obtained, when the width of the window was changed, so that nothing else was recalculated, but only the size of the square would be compressed / increase so that the same content remains in the viewport, it would just be zoomed, and parallel to the zoom (i.e., changing the height and width of the square) the thickness of the square lines would decrease.

I am new to this business, so I apologize if it sounded stupid somewhere, or it takes a lot of time to solve a similar problem.

Examples would help a lot.

Thanks in advance for your help.

    0