HTML5 grid sizing - html

Question

I am creating an HTML5 grid for a website. The grid looks the way I would like it to, however in each "big" square, there are 10 smaller squares. I need there to be only 5 squares in each "big" square. I am not proficient in HTML5 and am not sure how to even word the question, hopefully someone understands what I am trying to do here.
HERE is the site: http://www.webexplosive.com/sms_test/piermap.html
and HERE is my grid code:
<div style="width: 902px; height: 602px; position: absolute; left: 0px; top: 86px;">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="minorGrid" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M 10 0 L 0 0 0 10" fill="none" stroke="#FF4444" stroke-width="0.5"/>
</pattern>
<pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse">
<rect width="100" height="100" fill="url(#minorGrid)"/>
<path d="M 100 0 L 0 0 0 100" fill="none" stroke="red" stroke-width="4"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)" />
</svg>
</div>

Answer 1

Look at this:
http://jsfiddle.net/cBXER/
<div style="width: 902px; height: 602px; position: absolute; left: 0px; top: 86px;">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="minorGrid" width="20" height="20" patternUnits="userSpaceOnUse">
<path d="M 20 0 L 0 0 0 20" fill="none" stroke="#FF4444" stroke-width="0.5"/>
</pattern>
<pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse">
<rect width="100" height="100" fill="url(#minorGrid)"/>
<path d="M 100 0 L 0 0 0 100" fill="none" stroke="red" stroke-width="4"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)" />
</svg>
</div>
You need to change your minor grid width, height and path d values to 20 because 20 is one-fifth of 100.