css-grid/implicit-columns-and-rows.svg

<svg
	xmlns="http://www.w3.org/2000/svg"
	width="420" height="260"
	viewBox="0 0 420 260"
	shape-rendering="crispEdges"
>

<style type="text/css"><![CDATA[
text {
	stroke: none;
	text-anchor: middle;
	dominant-baseline: central;
}
]]></style>

<rect x="0" y="0" width="420" height="260" fill="white"/>

	<g
transform="translate(70,30)"
fill="white"
stroke="black"
stroke-width="1"
font-size="30"
	>

		<g transform="translate(50, 50)">
<path
	d="M-40,-40 v80 h80 v-80 z"
	fill="blueviolet"
/>
<text>A</text>
		</g>


		<g transform="translate(280, 110)">
<path
	d="M-50,-100 v200 h100 v-200 z"
	fill="orange"
/>
<text>B</text>
		</g>

		<g transform="translate(110,160)">
<path
	d="M-100,-50 v100 h200 v-100 z"
	fill="steelblue"
/>
<text>C</text>
		</g>

<path
	stroke-dasharray="6,3"
	stroke-dashoffset="0"
	stroke="gray"
	fill="none"
	d="
M100,0 h240 M100,100 h240 M0,220 h340
M0,100 v120 M100,100 v120 M220,0 v220 M340,0 v220
" />

<path
	stroke-dasharray="6,3"
	stroke-dashoffset="0"
	stroke="black"
	stroke-width="2"
	fill="none"
	d="M0,0 h100 v100 h-100 z"
/>

	</g>

	<g font-size="14" fill="gray" font-family="monospace">
<text x="70" y="20">1</text>
<text x="170" y="20">2</text>
<text x="290" y="20">3,4,5</text>
<text x="410" y="20">6</text>

<text x="60" y="30">1</text>
<text x="60" y="130">2</text>
<text x="60" y="250">3</text>
	</g>

	<g font-size="16" fill="black" font-family="monospace">
<text x="30" y="80">20px</text>
<text x="30" y="190">auto</text>
<text x="120" y="15">20px</text>
<text x="230" y="15">auto</text>
<text x="350" y="15">auto</text>
	</g>

</svg>