HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Booking</title>
</head>
<body>
<div class="grid-container">
<div *ngFor="let parking of parkings; let i=index; let x=index;">
<div class="grid-item">{{parking.column}}</div>
</div>
</div>
</body>
</html>
CSS:
.grid-container {
display: grid;
grid-template-columns: repeat(38, 60px);
grid-auto-rows: minmax(0px, auto);
}
.grid-item {
font-size: 25px;
background-color: #00ff73;
color: rgb(0, 0, 0);
align-content: flex-start;
}
TS:
import { Component, OnInit } from "@angular/core";
import parkingData from "./layout.json";
interface Parking {
row: String;
value: String;
column: String;
number: String;
direction: String;
}
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
parkings: Parking[] = parkingData;
ngOnInit() {}
}
current output:
how to make the above grid container fit to screen size when ever we do (ctrl + scroll)
when i add the CSS change width and height to fit the screen:
.grid-container {
display: grid;
grid-template-columns: repeat(38, 60px);
grid-auto-rows: minmax(0px, auto);
width: 100vw;
height: 100vh;
}
.grid-item {
font-size: 25px;
background-color: #00ff73;
color: rgb(0, 0, 0);
align-content: flex-start;
}
I get output like this:
What should i do to over come this issue in order to make it fit to the screen. NOTE: the number of columns should not wrap the number of row and columns(row and column count should remain the same)
LINK TO CODESANDBOX - https://codesandbox.io/s/grid-layout-demo-3tvuhg
