CODEWITHSUNDEEP
htmlcsscss-grid
Boris Grunwald
Boris Grunwald

Reputation: 2712

Aligning text in grid with svg

I have the following svg inside a grid

    .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>

Now, I would like to place some content centered in the space between each of the horizontal lines here

enter image description here

But when I try to place something for example between column 2/7 and row 2/4 the rows shrink for some reason

enter image description here

That is a problem since I would like to center the content between the lines.

Can anyone tell me why this happens and how I get around it?

Upvotes: 3

Views: 317

Answers (1)

Anton
Anton

Reputation: 8508

You are missing grid-template-rows, if this option miss, grid-template-rows by default use auto and all what you put inside grid cells adaptive for content.

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

grid-template-rows

Upvotes: 1

Related Questions