How to fit the grid template css on parent dive in angular

CSS

.grid {  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;      grid-template-rows: 1fr 1fr 1fr 1fr 1fr;      grid-template-areas:          "LINE1Aflr LINE1Aflr LINE1Aflr . . . LINE1Bflr LINE1Bflr"          "LINE1Aflr LINE1Aflr LINE1Aflr . . . LINE1Bflr LINE1Bflr"          "LINE3flr LINE3flr LINE3flr . . . LINE1Bflr LINE1Bflr"          "LINE3flr LINE3flr LINE3flr . . . . ."          "LINE3flr LINE3flr LINE3flr . . . . .";      transform-origin: 0px 0px 0px;      transform: matrix(0.592026, 0, 0, 0.592026, 0, 0);      }  

HTML*

<div class="h-100 w-100">   <div class="grid">     </div>  </div>  

I have a problem which the grid template doesn't fit on parent div. here's the screenshot:

it doesn't fit on the parent div, the empty I set the width to auto but when I try to add width. the display will be like this:

I set the width to 150px then that's the output.

https://stackoverflow.com/questions/65417861/how-to-fit-the-grid-template-css-on-parent-dive-in-angular December 23, 2020 at 09:11AM