search

Home  >  Q&A  >  body text

Inconsistent gaps using CSS Grid

I have an html document that uses CSS grid:

<!DOCTYPE html>

<html lang="en-IT">

    <head>
    
        <title>Site</title>
        
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>

            .grid1 {
                display: grid;
                grid-template-columns: repeat(3, 1rem);
                grid-template-rows: repeat(3, 1rem);
                row-gap: 1px;
                column-gap: 1px;
            }

            .cell1 {
                fill:rgb(130, 190, 234);
                stroke-width:0;
                stroke:rgb(0,0,0);
                width: 100%;
                height: 100%;
            }

        </style>

    </head>

    <body id="mainBody">

        <div class="grid1">
             <svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
                <rect class="cell1"/>
             </svg>
             <svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
                <rect class="cell1"/>
             </svg>
             <svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
                <rect class="cell1"/>
             </svg>
             <svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
                <rect class="cell1"/>
             </svg>
             <svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
                <rect class="cell1"/>
             </svg>
             <svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
                <rect class="cell1"/>
             </svg>
             <svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
                <rect class="cell1"/>
             </svg>
             <svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
                <rect class="cell1"/>
             </svg>
             <svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
                <rect class="cell1"/>
             </svg>
        </div>
        
    </body>
    
</html>

But even if I set the row and column gaps to 1px, I still get this:

As you can see, the first column gap and row gap are 2px wide. If I increase the number of rows and columns, the pattern repeats. What did I do wrong? Thanks!

P粉648469285P粉648469285508 days ago635

reply all(1)I'll reply

  • P粉212971745

    P粉2129717452023-09-08 11:09:20

    Try the following

    replace:

    .grid1 {
        display: grid;
        grid-template-columns: repeat(3, 1rem);
        grid-template-rows: repeat(3, 1rem);
        row-gap: 1px;
        column-gap: 1px;
    }

    is replaced with: 

    .grid1 {
    display: grid;
    grid-template-columns: repeat(3, 1rem);
    grid-template-rows: repeat(3, 1rem);
    gap: 1px;

}

    gap:1px is all you need.

    However, you also need to set the width and height for .grid1, for example: 

    .grid1 {
        display: grid;
        grid-template-columns: repeat(3, 1rem);
        grid-template-rows: repeat(3, 1rem);
        gap: 1px;
        width:100px;
        height:100px;
    
    }

    If you are not sure about the width and height, just set them to width:auto; height:auto; and let the content within the grid determine the width and height.

    reply
    0
  • Cancelreply