Given values of variables $n, $m and $gap.
I want to display a matrix of equal red rectangles, having dimensions of $m rows and $n columns. Vertical and horizontal spaces between the rectangles will be $gap percent of the parent element's width and height respectively. Same size will have the margins of the matrix to the parent's edge.
For example for $n=2 and $m=3 this is the desired outcome:
Here is my code:
<?php
$n=2; //axis x
$m=3; //axis y
$gap=10% //percent of the parent's dimension
$childwidth=round((100-$gap*($n+1))/$n);
$childheight=round((100-$gap*($m+1))/$m);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hey I am a title</title>
<style>
body{margin:0px;}
.parent, html, body{width: 100%; height: 100%;}
.parent{margin: <?php echo $gap; ?>% <?php echo $gap; ?>% 0 0;}
.child{margin: 0% 0% <?php echo $gap; ?>% <?php echo $gap; ?>% ; width: <?php echo $childwidth; ?>%; height: <?php echo $childheight; ?>%; background-color: #a00;}
</style>
</head>
<body>
<div class=parent>
<div class=child>e</div>
<div class=child>r</div>
<div class=child></div>
<div class=child></div>
<div class=child></div>
<div class=child></div>
</div>
</body>
</html>
Could I please have an advice how to finish it? Thank you.
I work with percentages of the parent element. If it would be necessary to work with pixels instead, I have this code that enables to get window dimension into a php variable (window=parent in my case).
<script type="text/javascript">
document.cookie = 'window_width='+window.innerWidth+'; expires=Fri, 3 Aug 2901 20:47:11 UTC; path=/';
document.cookie = 'window_height='+window.innerHeight+'; expires=Fri, 3 Aug 2901 20:47:11 UTC; path=/';
</script>
<?php
echo "inner: ";
echo $_COOKIE['window_width']."x";
echo $_COOKIE['window_height'];
?>
