Reputation: 2268

CSS grid with sqaure SVG elemnents

I'm having a problem to make css grid cells to always be square, and inside each one to have square SVG element.

CSS grid should fit 100% to parent container, and preserve squareness on browser resize (up to 60x60px).

Right now, I have strange empty space above and below elements.

This is my current style:

<style>

        *{
            box-sizing: border-box;
        }

        .zubi{
            display: grid;
            grid-template: repeat(2, 1fr) / repeat(16, 1fr);
            gap: .6rem;
            margin: .6rem;
        }

        .zub{
            border-radius: .3vw;

            width: 100%;
            
            --boja-zuba-unutra: white;
            --boja-zuba-spolja: currentColor;
        } 

    </style>

I prepared code-pen example: https://codepen.io/bojanv55/pen/JjXGLXO

Any idea? Thanks.

UPDATE

OK, I managed to do it. I just needed to remove viewBox properties from elements and move it to the place where I actually include svg elements (in this case element). I updated the code-pen also.

Upvotes: 0

Answers (1)

Rob Moll

Reputation: 3453

I commented out these 2 lines:

gap: .6rem;
margin: .6rem;

Does that give the expected result?

Edit: I replaced the 1fr references to 60px here:

grid-template: repeat(2, 60px) / repeat(16, 60px);

and gave .zub a height of 100% as well:

.zub {
      border-radius: .3vw;
      width: 100%;
      height: 100%;
      --boja-zuba-unutra: white;
      --boja-zuba-spolja: currentColor;
    }

The main culprit was the 1fr (1 fraction unit). See here for more about that: fractional unit

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ll</title>
  <style>
    * {
      box-sizing: border-box;
    }
    
    .zubi {
      display: grid;
      grid-template: repeat(2, 60px) / repeat(16, 60px);
      /*gap: .6rem;*/
      /*margin: .6rem;*/
    }
    
    .zub {
      border-radius: .3vw;
      width: 100%;
      height: 100%;
      --boja-zuba-unutra: white;
      --boja-zuba-spolja: currentColor;
    }
  </style>

  <svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="zub-5-zona" viewBox="0 0 120 120" fill="white" style="fill: var(--boja-zuba-unutra, white)">
        <rect width="120" height="120" fill="black" style="fill: var(--boja-zuba-spolja, black)"/>
        <path class="gore" d="M 6.8,4 L 113.2,4 79.2,38 40.8,38"/>
        <path class="desno" d="M 116,6.8 L 116,113.2 82,79.2 82,40.8 116,6.8"/>
        <path class="dole" d="M 6.8,116 L 113.2,116 79.2,82 40.8,82 6.8,116"/>
        <path class="lijevo" d="M 4,6.8 L 38,40.8 38,79.2 4,113.2 4,6.8"/>
        <path class="centar" d="M 42,42 L 78,42 78,78 42,78 42,42"/>
    </symbol>
    <symbol id="zub-4-zone" viewBox="0 0 120 120" fill="white" style="fill: var(--boja-zuba-unutra, white)">
        <rect width="120" height="120" fill="black" style="fill: var(--boja-zuba-spolja, black)"/>
        <path class="gore" d="M 6.8,4 L 113.2,4 79.2,58 40.8,58" />
        <path class="desno" d="M 116,6.8 L 116,113.2 82.4,60 116,6.8" />
        <path class="dole" d="M 6.8,116 L 113.2,116 78.8,62 41.08,62 6.8,116" />
        <path class="lijevo" d="M 4,6.8 L 37.6,60 4,113.2 4,6.8" />
    </symbol>
</svg>
</head>

<body>

  <div class="zubi">
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>

    <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
    <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
    <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
    <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
    <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
    <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>

    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>

    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>

    <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
    <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
    <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
    <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
    <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
    <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>

    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
  </div>

</body>

</html>

Try this "responsive" version to see if we're on the right track. It might need a little more work:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ll</title>
    <style>

        *{
            box-sizing: border-box;
        }

        .zubi{
            display: grid;
            grid-template: repeat(2, 50%) / repeat(16, 6.25%);
            /*gap: .6rem;
            margin: .6rem;*/
        }

        .zub{
            border-radius: .3vw;

            width: 100%;
            --boja-zuba-unutra: white;
            --boja-zuba-spolja: currentColor;
        } 

    </style>
    
    <svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="zub-5-zona" viewBox="0 0 120 120" fill="white" style="fill: var(--boja-zuba-unutra, white)">
        <rect width="120" height="120" fill="black" style="fill: var(--boja-zuba-spolja, black)"/>
        <path class="gore" d="M 6.8,4 L 113.2,4 79.2,38 40.8,38"/>
        <path class="desno" d="M 116,6.8 L 116,113.2 82,79.2 82,40.8 116,6.8"/>
        <path class="dole" d="M 6.8,116 L 113.2,116 79.2,82 40.8,82 6.8,116"/>
        <path class="lijevo" d="M 4,6.8 L 38,40.8 38,79.2 4,113.2 4,6.8"/>
        <path class="centar" d="M 42,42 L 78,42 78,78 42,78 42,42"/>
    </symbol>
    <symbol id="zub-4-zone" viewBox="0 0 120 120" fill="white" style="fill: var(--boja-zuba-unutra, white)">
        <rect width="120" height="120" fill="black" style="fill: var(--boja-zuba-spolja, black)"/>
        <path class="gore" d="M 6.8,4 L 113.2,4 79.2,58 40.8,58" />
        <path class="desno" d="M 116,6.8 L 116,113.2 82.4,60 116,6.8" />
        <path class="dole" d="M 6.8,116 L 113.2,116 78.8,62 41.08,62 6.8,116" />
        <path class="lijevo" d="M 4,6.8 L 37.6,60 4,113.2 4,6.8" />
    </symbol>
</svg>
</head>
<body>

    <div class="zubi">
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>

        <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
        <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
        <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
        <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
        <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
        <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>

        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>

        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>

        <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
        <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
        <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
        <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
        <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>
        <svg class="zub"><use xlink:href="#zub-4-zone"/></svg>

        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
        <svg class="zub"><use xlink:href="#zub-5-zona"/></svg>
    </div>

</body>
</html>

Upvotes: 1

CSS grid with sqaure SVG elemnents

Answers (1)

Related Questions