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

<svg xmlns="http://www.w3.org/2000/svg" width="360" height="240" style="font-family: sans-serif;" fill="transparent" text-anchor="middle">
	<rect width="100%" height="100%" fill="white" />
	<g transform="translate(50, 30)">
		<g style="font-size: 40px; font-weight: bold;">
			<g transform="translate(.5, .5)">
				<path stroke-dasharray="4 3" stroke-width="1" stroke="black" d="M 0 0 h 100 v 100 h -100 v -100" />
				<path stroke-dasharray="4 3" stroke-width="1" stroke="#aaa"  d="M 100 0 h 200 v 200 h -300 v -100 M 100 100 v 100 M 100 100 h 200 M 200 0 v 200" />
			</g>
			<g transform="translate(10, 10)">
				<rect width="80" height="80" fill="hsl(270,40%,50%)" />
				<text fill="white" x="40" y="55">A</text>
			</g>
			<g transform="translate(210, 10)">
				<rect width="80" height="180" fill="hsl(30,70%,50%)" />
				<text fill="white" x="40" y="105">B</text>
			</g>
			<g transform="translate(10, 110)">
				<rect width="180" height="80" fill="hsl(210,40%,50%)" />
				<text fill="white" x="90" y="55">C</text>
			</g>
		</g>
		<g fill="black">
			<g text-anchor="end">
				<text x="-10" y="55">20px</text>
				<text x="-10" y="155">auto</text>
			</g>
			<g text-anchor="middle">
				<text x="50" y="-10">20px</text>
				<text x="150" y="-10">auto</text>
				<text x="250" y="-10">auto</text>
			</g>
		</g>
		<g fill="gray" style="font-size: 12px">
			<g text-anchor="end">
				<text x="-5" y="5">1</text>
				<text x="-5" y="105">2</text>
				<text x="-5" y="205">3</text>
			</g>
			<g text-anchor="middle">
				<text x="0" y="-5">1</text>
				<text x="100" y="-5">2</text>
				<text x="200" y="-5">3,4,5</text>
				<text x="300" y="-5">6</text>
			</g>
		</g>
	</g>
</svg>