coding matrix of child elements in php

Viewed 92

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:

enter image description here

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'];
?>
1 Answers

Seems to me that all you need is a fairly straightforward css grid (using display: grid and gap and the like). Here's some examples on how to use it.

Related