CODEWITHSUNDEEP
htmlcsssvg
Richard
Richard

Reputation: 16772

How to stop SVG breaking CSS grid layout?

Whenever I insert SVG into my grid layout it 1) doesn't center, and 2) breaks the layout of the grid. How do I fix this please, so that the play icon shows in the same way the play text does.

Here's the layout that's breaking:

.body { background-color: hsl(0,0%,10%); color: white; font-size: 32px; }
.center_children { display: flex; justify-content: center; }
.timer
{
width: 12rem; height: 12rem; border-radius: 50%;
background-color: hsl(0, 50%, 50%); 
display:grid; grid-template-rows: 2fr 1fr; gap: 1.5rem;
}
<div class="body">
<br />
<div class="timer">
    <div class="center_children">
        <div class="play">Play</div>
    </div>
    <div class="center_children">1:39</div>
</div>
<br />
</div>

<br /><br />

<div class="body">
<br />
<div class="timer">
    <div class="center_children">
        <div class="play">
            <svg width="100%" height="100%" viewBox="0 0 100 100" ><polygon points="0,0 75,50 0,100" style="fill:#fff;" /></svg>
        </div>
    </div>
    <div class="center_children">1:39</div>
</div>
<br />
</div>

Upvotes: 2

Views: 716

Answers (1)

Richard
Richard

Reputation: 16772

Here are the problems in your code:

  • You haven't specified the width and height of both your grid rows and columns, so as the svg grows it pushes the grid out of your intended alignment.
  • fr units are fractions of available space. They will move depending on your content. If you want rows fixed at 33% and 66% then you have to use % not fr.
  • You haven't added justify-content: center to center your columns. You don't need the flexbox.
  • You don't need to specify a viewBox for an SVG if you want the whole image to show. You are not understanding viewport versus viewBox (read https://webdesign.tutsplus.com/tutorials/svg-viewport-and-viewbox-for-beginners--cms-30844).

Here's the code fixed (add a little padding yourself to make things look perfect relative the circle):

.body { background-color: hsl(0,0%,10%); color: white; font-size: 32px; }
.timer
{
width: 12rem; height: 12rem; border-radius: 50%;
background-color: hsl(0, 50%, 50%); 
display:grid; grid-template-rows: 66% 33%; 
grid-template-columns: 5rem;
justify-content: center;
}
<div class="body">
<div class="timer">
    <div class="play">
        <svg width="100%" height="100%" ><polygon points="0,0 75,50 0,100" style="fill:#fff;" /></svg>
    </div>
    <div>1:39</div>
</div>
</div>

Upvotes: 1

Related Questions