Question 42579 in Html Question posted in
Some basic documentation can be found here.

grid doesn't cover entire screen – Html

I am using CSS grids to design my website. However, when I added the background color (hoping that it will cover the entire grid) it only covered part of it in each grid item. This is the CSS grid structure I Was going for. I wanted each grid cell to be fully filledInstead of each cell being fully filled with color, it seems that only part of it is

I’m new to CSS grids so I’m open to ay suggestions.

body {
  font-family: "Lato", sans-serif;
  transition: background-color .5s;
  background-color: #ff9900;
}
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #000000;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #ff9900;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #fbc67d;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
    display: grid;
    grid-template-columns: 15fr repeat(4, 1fr) 15fr;
    grid-template-rows: 1fr 6fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.body { 
    grid-area: 2 / 1 / 3 / 7; 
}


.howto { 
    grid-area: 1 / 2 / 2 / 3; 
}

.textcenter {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fbc67d;
}

.bi-info-circle-fill {
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #976825;
}

.bi-play-circle-fill {
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #976825;
}

.bi-circle-half {
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #976825;
}

.bi-piggy-bank-fill {
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #976825;
} 

.bi-info-circle-fill:hover {
    filter: invert(100%);
}

.bi-play-circle-fill:hover {
    filter: invert(100%);
}

.bi-circle-half:hover {
    filter: invert(100%);
}

.bi-piggy-bank-fill:hover {
    filter: invert(100%);
}

.play { 
    grid-area: 1 / 3 / 2 / 4; 
}


.lightmode { 
    grid-area: 1 / 4 / 2 / 5; 
}


.donate { 
    grid-area: 1 / 5 / 2 / 6; 
}

@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>

<div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
</div>
    
<div id="main">
    <div class="howto"><span style="cursor:pointer" onclick="openNav()">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle-fill" viewBox="0 0 16 16">
            <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
        </svg>
    </div>
    <div class="play">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play-circle-fill" viewBox="0 0 16 16">
            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z"/>
        </svg>
    </div>
    <div class="lightmode">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle-half" viewBox="0 0 16 16">
            <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
        </svg>
    </div>
    <div class="donate">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-piggy-bank-fill" viewBox="0 0 16 16">
            <path d="M7.964 1.527c-2.977 0-5.571 1.704-6.32 4.125h-.55A1 1 0 0 0 .11 6.824l.254 1.46a1.5 1.5 0 0 0 1.478 1.243h.263c.3.513.688.978 1.145 1.382l-.729 2.477a.5.5 0 0 0 .48.641h2a.5.5 0 0 0 .471-.332l.482-1.351c.635.173 1.31.267 2.011.267.707 0 1.388-.095 2.028-.272l.543 1.372a.5.5 0 0 0 .465.316h2a.5.5 0 0 0 .478-.645l-.761-2.506C13.81 9.895 14.5 8.559 14.5 7.069c0-.145-.007-.29-.02-.431.261-.11.508-.266.705-.444.315.306.815.306.815-.417 0 .223-.5.223-.461-.026a.95.95 0 0 0 .09-.255.7.7 0 0 0-.202-.645.58.58 0 0 0-.707-.098.735.735 0 0 0-.375.562c-.024.243.082.48.32.654a2.112 2.112 0 0 1-.259.153c-.534-2.664-3.284-4.595-6.442-4.595Zm7.173 3.876a.565.565 0 0 1-.098.21.704.704 0 0 1-.044-.025c-.146-.09-.157-.175-.152-.223a.236.236 0 0 1 .117-.173c.049-.027.08-.021.113.012a.202.202 0 0 1 .064.199Zm-8.999-.65a.5.5 0 1 1-.276-.96A7.613 7.613 0 0 1 7.964 3.5c.763 0 1.497.11 2.18.315a.5.5 0 1 1-.287.958A6.602 6.602 0 0 0 7.964 4.5c-.64 0-1.255.09-1.826.254ZM5 6.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"/>
        </svg>
    </div>
    <div class="body textcenter">box</div>
</div>
Tags:

2

Answers


  1. 0

    Maybe you added the grid inside that div which have a margin around it or maybe it is a container. So Ill suggest you inspect the code and check if there is any margin around it or not and give width full the parent div of the grid class.

    Login or Signup to reply.
  2. 0

    There are multiple solutions:
    You can add whole grid in one div or you can just give I’d to main grid then you can use background properties on that div.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search