使用 svg 對齊網格中的文本

Question

我在網格中有以下 svg

 .timeline__grid { display: grid; grid-template-columns: repeat(6, 1fr); } svg { width: 100%; height: auto; grid-column: 1/-1; grid-row: 1/11; }

 <div class="timeline__grid"> <svg width="415" height="1200" viewBox="0 0 415 1200" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M395 0V0C395 66.2742 341.274 120 275 120H140C73.7258 120 20 173.726 20 240V240" stroke="black" stroke-width="4"/> <path d="M395 480V480C395 413.726 341.274 360 275 360H140C73.7258 360 20 306.274 20 240V240" stroke="black" stroke-width="4"/> <path d="M395 480V480C395 546.274 341.274 600 275 600H140C73.7258 600 20 653.726 20 720V720" stroke="black" stroke-width="4"/> <path d="M20 720V720C20 786.274 73.7258 840 140 840H275C341.274 840 395 893.726 395 960V960" stroke="black" stroke-width="4"/> <path d="M395 960V960C395 1026.27 341.274 1080 275 1080H140C73.7258 1080 20 1133.73 20 1200V1200" stroke="black" stroke-width="4"/> </svg> <!-- <h2 style="font-size: 2rem; color:white; grid-column: 3/7; grid-row:2/4">test</h2> --> </div>

現在，我想在此處的每條水平線之間的空間中放置一些內容

但是當我嘗試在第 2/7 列和第 2/4 行之間放置一些東西時，由於某種原因，行會縮小

這是一個問題，因為我想將內容放在兩行之間。

誰能告訴我為什么會發生這種情況以及我如何解決它？

Answer 1

您缺少grid-template-rows ，如果此選項未命中，默認情況下grid-template-rows使用auto以及您放入網格單元格中的所有內容以適應內容。

.timeline__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(10, 1fr); /* New line */
}