I am using GRID in CSS and trying to make a map layout. but the layout is not coming in full screen.-CodePudding

below is the html code for the layout: which uses json input to create grids dynamically.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Booking</title>
  </head>
  <body>
    <div >
        <div *ngFor="let parking of parkings;let i=index; let x=index;">
            <div ></div>
        </div>
    </div>
  </body>
</html>

and this is the SCSS part of the code:

.grid-container {
  
  display: grid;
  grid-template-columns: repeat(var(--columnmax),60px);
  grid-auto-rows: minmax(0px, auto);
  padding-top:  var(--scrHalfHeight);
  padding-left: var(--scrHalfWidth);
  justify-content: center;
}    

.grid-item {
  font-size: 25px;
  background-color: #00ff73;
  color: rgb(0, 0, 0);
}

the current output looks something like this: attached image

question: how to remove the white background. or make the "grid-container" fit to screen?

CodePudding user response：

Add the following CSS:

.grid-container {
  width: 100vw;
}

CodePudding user response：

You have three statements in your CSS that are causing your problem.

The most important is justify-content: center. justify-content deliberately attempts to align the items in the grid at the center of the container. If you want them to stretch to fill the container you need to remove this statement.

The other two statements that may be causing problems are padding-top: var(--scrHalfHeight) and padding-left: var(--scrHalfWidth). These statements attempt to put padding in at the top and left of the grid respectively. The amount of the padding is defined by --scrHalfHeight/--scrHalfWidth which are CSS variables which will be defined somewhere else in your code. We can't see these variables in the code above, but their names seem to imply that they have been calculated at half screen height and width. Again, just removing these lines should remove the padding.

You will probably also need the code in the other answers here to force the grid container itself to fill the width and height of the screen (width: 100vw; height: 100vh; in the .grid-container definition).

Below is a simplified version of your code that shows that if you add width and height and take out the three lines then this forces our grid items, which have a green background, to fill the screen:

/* Don't add to the actual project - some values for the CSS variables we can't see  */
:root {
  --scrHalfHeight:25px;
  --scrHalfWidth: 25px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(var(--columnmax), 60px);
  grid-auto-rows: minmax(0px, auto);
  /* Set the grid to fill the width and height of the screen */
  width: 100vw;
  height: 100vh;
  /* Take out 3 lines below for grid items to fill screen */
  /* padding-top: var(--scrHalfHeight);
  padding-left: var(--scrHalfWidth);
  justify-content: center; */
}

.grid-item {
  font-size: 25px;
  background-color: #00ff73;
  color: rgb(0, 0, 0);
}

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Booking</title>
  </head>
  <body>
    <div >
      <div >1</div>
      <div >2</div>
      <div >3</div>
    </div>
  </body>
</html>