container div way bigger-CodePudding

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    
    <div >
        <div >
        </div>
        <div >
        </div>
        <div >
        </div>
        <div >
        </div>
        <div >
        </div>
        <div >
        </div>
        <div >
        </div>
    </div>
</html>

.container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(7, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 5px;
    background:#25523B;
    }
    
    .main { 
        grid-area: 1 / 1 / 2 / 5; 
        background-color: #77dd76;
        color:white;
        font-weight: bold;
        border-radius: 10px;
    }
    .content1 { 
        grid-area: 2 / 1 / 6 / 2;
        background-color: white;
        border-radius: 25px;
        border: 2px solid #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;

    }
    .content2 { 
        grid-area: 2 / 2 / 6 / 3; 
        background-color: white;
        border-radius: 25px;
        border: 2px solid #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }
    .content3 { 
        grid-area: 2 / 3 / 6 / 4; 
        background-color: white;
        border-radius: 25px;
        border: 2px solid #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px; 
    }
    .content4 { 
        grid-area: 2 / 4 / 6 / 5; 
        background-color: white;
        border-radius: 25px;
        border: 2px solid #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }
    .subcontent {
        grid-area: 6 / 1 / 7 / 5; 
        background-color: #77dd76;
        border-radius: 25px;
        }
    .footer { 
        grid-area: 7 / 1 / 8 / 5;
        background-color: #77dd76;
        color:white;
        font-weight: bold;
        border-radius: 10px;
        
     }

    table {
        font-family: Georgia, serif;
        border: 6px solid white;
        background-color: #D4EED1;
        width: 100%;
        text-align: center;
        border-radius: 25px;
        padding: 20px;
        width: 200px;
        height: 150px;
      }

So the problem with this css is that my container div seems way bigger than my other div. So i would like to know if there is a way on how to keep the same div ratio between the other div so that it stays within the container div but must be filled. As of now the other div are not going full screen even when the container div is.

CodePudding user response：

you can change grid-template-column : repeat(4,1fr) or you can delete this grid-template-column I have tried and it works

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(7, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 5px;
    background:#25523B;
    }
    
    .main { 
        grid-area: 1 / 1 / 2 / 5; 
        background-color: #77dd76;
        color:white;
        font-weight: bold;
        border-radius: 10px;
    }
    .content1 { 
        grid-area: 2 / 1 / 6 / 2;
        background-color: white;
        border-radius: 25px;
        border: 2px solid #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;

    }
    .content2 { 
        grid-area: 2 / 2 / 6 / 3; 
        background-color: white;
        border-radius: 25px;
        border: 2px solid #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }
    .content3 { 
        grid-area: 2 / 3 / 6 / 4; 
        background-color: white;
        border-radius: 25px;
        border: 2px solid #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px; 
    }
    .content4 { 
        grid-area: 2 / 4 / 6 / 5; 
        background-color: white;
        border-radius: 25px;
        border: 2px solid #73AD21;
        padding: 20px;
        width: 200px;
        height: 150px;
    }
    .subcontent {
        grid-area: 6 / 1 / 7 / 5; 
        background-color: #77dd76;
        border-radius: 25px;
        }
    .footer { 
        grid-area: 7 / 1 / 8 / 5;
        background-color: #77dd76;
        color:white;
        font-weight: bold;
        border-radius: 10px;
        
     }

    table {
        font-family: Georgia, serif;
        border: 6px solid white;
        background-color: #D4EED1;
        width: 100%;
        text-align: center;
        border-radius: 25px;
        padding: 20px;
        width: 200px;
        height: 150px;
      }

 <div >
        <div >
        </div>
        <div >
        </div>
        <div >
        </div>
        <div >
        </div>
        <div >
        </div>
        <div >
        </div>
        <div >
        </div>
    </div>