css-grid/auto-flow.svg

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

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

.item > path {
	fill: hsl(220, 80%, 90%);
	stroke: blue;
	stroke-width: 1px;
}

.item > text {
	font-size: 30px;
	fill: hsl(220, 80%, 60%);
}

.grid-line > path {
	stroke-dasharray: 6,3;
	stroke-dashoffset: 0;
	fill: none;
}

.implicit > path {
	stroke: red;
	stroke-width: 2px;
}
.implicit > text {
	fill: red;
}

.explicit > path {
	stroke: black;
	stroke-width: 2px;
}

.line-names > text {
	font-size: 16px;
	fill: gray;
	font-family: monospace;
}

.track-sizes > text {
	font-size: 16px;
	font-family: monospace;
}

]]></style>

<rect x="0" y="0" width="400" height="360" fill="white"/>

	<g
transform="translate(70,40)"
fill="white"
stroke="black"
stroke-width="1"

	>

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

		<g class="item" transform="translate(200, 50)">
<path
	d="M-90,-40 v80 h180 v-80 z"
/>
<text>B</text>
		</g>

		<g class="item" transform="translate(50, 200)">
<path
	d="M-40,-90 v180 h80 v-180 z"
/>
<text>C</text>
		</g>

		<g class="item" transform="translate(200, 200)">
<path
	d="M-90,-90 v180 h180 v-180 z"
/>
<text>D</text>
		</g>

		<g class="grid-line implicit">
<path
	d="
M100,0 h200 M100,100 h200 M0,300 h300
M0,100 v200 M100,100 v200 M300,0 v300
" />
		</g>

		<g class="grid-line explicit">
<path
	d="M0,0 h100 v100 h-100 z"
/>
		</g>
		<g class="line-names">
<text x="0" y="-10">1</text>
<text x="100" y="-10">2</text>
<text x="300" y="-10">3</text>

<text x="-10" y="0">1</text>
<text x="-10" y="100">2</text>
<text x="-10" y="300">3</text>
		</g>

		<g class="track-sizes">
<text x="-30" y="50">20px</text>
<text x="50" y="-20">20px</text>
		</g>

		<g class="track-sizes implicit">
<text x="200" y="-20">auto(40px)</text>
<text>
<tspan x="-30" y="190">auto</tspan>
<tspan x="-30" y="210">(40px)</tspan>
</text>
		</g>
	</g>
</svg>