There is one big block <div id="container"> .
In it you need to place blocks of the same size, like a table, 4 in width and 4 in height. The blocks must be “rubber” and adapt to the size of the monitor.
How to implement it more correctly? Width in percent and indents set.
.item { width: 25%; float: left; box-sizing: border-box; } <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> For height only fixed, flexbox or calculate using javascript.
body { counter-reset: i; } div:after { content: counter(i); counter-increment: i; } div { float: left; width: 25%; /*box-sizing: boreder-box;*/ } <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> body { counter-reset: r, c; } .row { counter-increment: r; counter-reset: c; } .row div:after { content: counter(r) "/" counter(c); counter-increment: c; } .row div { float: left; width: 25%; /*box-sizing: boreder-box;*/ } <div class=row><div></div><div></div><div></div><div></div></div> <div class=row><div></div><div></div><div></div><div></div></div> <div class=row><div></div><div></div><div></div><div></div></div> <div class=row><div></div><div></div><div></div><div></div></div> 
Can be done on bootstrap .
<div class="row"> <div class="col-md-3">.col-md-3</div> <div class="col-md-3">.col-md-3</div> <div class="col-md-3">.col-md-3</div> <div class="col-md-3">.col-md-3</div> </div> ... 
Source: https://ru.stackoverflow.com/questions/436746/
All Articles