Discrete rubber layout without JS

Question

css

The task (it can be considered sports-theoretical) is to lay out a rubber page that stretches to the entire width of the window. But not smoothly, but discretely. For example, with a step of 50px.

That is, if the width of the client area of ​​the browser window is 820px -> the width of the body container should be 800px. Stretch the window to 830, 840, 845, 848px… the body stays the same, the excess goes into the margins on the sides. But at 850, it jumps in steps to 850. And so on: 900, 950, 1000...
Similarly, in the opposite direction - already with a window width of 849px, the size of the body should become 800px.

It is clear that this can be handled by scripts. What about pure CSS/HTML? :)
Any ideas?



UPD1
Media queries seem to be a relatively elegant solution: htmlbook.ru/css/value/media
You can directively set the body width for all possible screen widths with the desired step. Disadvantages: cumbersome (there will be several dozen such repetitions), inconvenient to modify, limited browser support. But this is the most natural, "human" solution. And if you dream up in the direction of manic options, then it will probably turn out somehow through nested float-blocks, which will give auto-fitting of the width? .. UPD2 I will give a specific example of why this may be necessary.
@media screen and (max-width: 799px) {
body { width: 750px; }
}
@media screen and (max-width: 849px) {
body { width: 800px; }
}
@media screen and (max-width: 899px) {
body { width: 850px; }
}
...



The page has a large numerical table with columns that are 50px wide. There are a lot of columns, so the table is guaranteed not to fit on most monitors. That is, scrolling in one form or another will certainly be.
But the nature of the data is such that the importance of the columns falls from left to right - and several right-hand columns can in principle be sacrificed; and if the user needs them, they will scroll.
Well, the designer had an idea to always show only whole columns, without cropping.

Answer 1

I'm not a web design guru, but is it possible to get the client's screen width without JS? And why can't you use it?

Answer 2

It's pretty easy with jQuery:

$(window).resize(function(){
  $('body').width(Math.min(800, parseInt(($(window).width() - 800) / 50) * 50));
});

Answer 3

Check out technogret - fight against jumping blocks v3 .
At 23:00, a side effect of this method is visible - discrete content resizing.

Answer 4

would this option not work?
Discretely, not on a grid, but block by block.