kolobok874,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body {
background: grey;
}
.sheet {
background: #fff;
width: 352px;
height: 348px;
display: flex;
margin: 10px auto;
flex-direction: column;
}
.row {
display: flex;
flex: 1;
height: auto;
}
.grid {
flex: 1;
border: 1px solid black;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var gridSheet = function(calc) {
var block = document.createDocumentFragment();
for (var a = 0; a < calc; a ++) {
var $row = $("<div class = 'row'></div>").appendTo(block);
for (var b = 0; b < calc; b ++) {
var $grid =$row.append("<div class = 'grid'></div>");
}
}
return block
};
$( ".sheet" ).each(function(i, div) {
var num = 1 + Math.random() * 10 | 0
var html = gridSheet(num)
$(div).html(html)
});
});
</script>
</head>
<body>
<div class = "sheet"></div>
<div class = "sheet"></div>
<div class = "sheet"></div>
<div class = "sheet"></div>
</body>
</html>