css-grid/implicit-lines-search.svg

<svg
	xmlns="http://www.w3.org/2000/svg"
	width="600" height="300"
	viewbox="0 0 600 300"
>
<style type="text/css">
text {
	font-size: 20px;
	font-family: monospace;
	text-anchor: middle;
	fill: black;
	stroke: none;
}

#legend > text {
	text-anchor: end;
}

#implicit > text {
	fill: red;
}

#grid > path {
	stroke-width: 2;
	stroke-dasharray: 8 5;
	fill: none;
}

#item > rect {
	fill: hsl(220, 80%, 90%);
	stroke: hsl(220, 80%, 65%);
	fill-opacity: 0.8;
	stroke-width: 2;
}
#item > text {
	fill: hsl(220, 80%, 65%);
}
</style>

<rect x="0" y="0" width="800" height="600" fill="#FFF" />


	<g id="legend" transform="translate(140, 50)">
<text x="0" y="0">罫の番号：</text>
<text x="0" y="30">番号(負)：</text>
<text x="0" y="60">罫の名前：</text>
	</g>

	<g transform="translate(180, 0)">

<text x="100" y="50">1</text>
<text x="200" y="50">2</text>

		<g id="implicit">
<text x="300" y="50">3</text>
<text x="400" y="50">4</text>

<text x="0" y="110">[foo]</text>

<text x="0" y="0">-3</text>
		</g>

<text x="100" y="80">-2</text>
<text x="200" y="80">-1</text>

		<g id="grid" transform="translate(0, 130)">
<path
	stroke="red"
	d="
M  0,  0 v100
M300,  0 v100
M400,  0 v100
M  0,  0 h100
M200,  0 h200
M  0,100 h100
M200,100 h200
" />
<path stroke="#333333" d="M100,0 v100 h100 v-100 z" />

			<g id="item">
<rect x="5" y="5" rx="10" ry="10" width="390" height="90" />
<text x="200" y="50">grid-column: span foo / 4;</text>
			</g>
		</g>
	</g>
</svg>