Css Grid content overflowing

Question

I'm new to css grid and am using it to build a dashboard.

When I fill one of the grid-items the content overflows it's container when the viewport height changes. I only noticed it when I took my work home and my mac screen is wider but shorter than my work screen.

This is what my code looks like:

 .grid-wrapper { height: calc(100vh - 75px); display: grid; grid-gap: 5px; grid-template-columns: repeat(9, 1fr); grid-template-rows: 0.25fr 1fr 1fr 1fr 1fr 1fr; grid-template-areas: "breadcrumb breadcrumb breadcrumb breadcrumb breadcrumb breadcrumb breadcrumb breadcrumb breadcrumb" "welcome welcome welcome library library library library library library" "learningplan learningplan learningplan library library library library library library" "learningplan learningplan learningplan library library library library library library" "learningplan learningplan learningplan news news news alerts alerts alerts" "learningplan learningplan learningplan news news news alerts alerts alerts"; color: #444; } .dashboard-learning-plan-widget { background-color: #fff; margin: 10px; padding: 20px; border-radius: 20px; box-shadow: 0 6px 7.6px -36px rgba(0, 0, 0, 0.08), 0 48px 61px -36px rgba(0, 0, 0, 0.16); }

 <div class="c dashboard-learning-plan-widget"> <div> <div fxLayout="row" fxLayoutAlign="space-between center"> <h4 class="is-size-5 has-text-weight-semibold">My Learning Plan</h4> <p class="is-size-6 has-text-weight-semibold">See all</p> </div> <div fxLayout="row" class="mtlg mbmd"> <div fxLayout="column" [ngClass]="{'learning-plan-dashboard-buttons--active': activeTabActive }" class="button mrmd mbmd learning-plan-dashboard-buttons" (click)="selectActive()"> <p>Mandatory</p> <div class="learning-plan-widget-numberCircle mbmd mtmd">21</div> </div> <div fxLayout="column" [ngClass]="{'learning-plan-dashboard-buttons--active': completedTabActive }" class="button mrmd mbmd learning-plan-dashboard-buttons" (click)="selectCompleted()"> <p>Upcoming</p> <div class="learning-plan-widget-numberCircle mbmd mtmd">21</div> </div> <div fxLayout="column" [ngClass]="{'learning-plan-dashboard-buttons--active': mandatoryTabActive }" class="button mrmd mbmd learning-plan-dashboard-buttons" (click)="selectMandatory()"> <p>My Plan</p> <div class="learning-plan-widget-numberCircle mbmd mtmd">21</div> </div> </div> <mat-tab-group animationDuration="1000ms" [selectedIndex]="selectedIndex"> <mat-tab label="Mandatory"> <div fxLayout="column"> <div fxLayout="row"> <mat-icon class="material-icons-outlined dashboard-learning-item-icon dashboard-learning-item-icon--mandatory"> laptop_mac </mat-icon> <h3 class="is-size-6 has-text-weight-medium mtxxs">Health & Safety</h3> <div fxFlex></div> <mat-icon class="is-size-6 mtxxs">calendar_today</mat-icon> <div class="is-size-6 has-text-weight-medium">06/02/2020</div> </div> <div fxLayout="row"> <div class="is-size-6half has-text-weight-medium mlsm">Booked</div> <div fxFlex></div> <mat-icon class="is-size-6">place</mat-icon> <div class="is-size-6half has-text-weight-medium">Leeds</div> </div> </div> <hr> <div fxLayout="column"> <div fxLayout="row"> <mat-icon class="material-icons-outlined dashboard-learning-item-icon dashboard-learning-item-icon--mandatory"> laptop_mac </mat-icon> <h3 class="is-size-6 has-text-weight-medium mtxxs">Health & Safety</h3> <div fxFlex></div> <mat-icon class="is-size-6 mtxxs">calendar_today</mat-icon> <div class="is-size-6 has-text-weight-medium">06/02/2020</div> </div> <div fxLayout="row"> <div class="is-size-6half has-text-weight-medium mlsm">Booked</div> <div fxFlex></div> <mat-icon class="is-size-6">place</mat-icon> <div class="is-size-6half has-text-weight-medium">Leeds</div> </div> </div> <hr> <div fxLayout="column"> <div fxLayout="row"> <mat-icon class="material-icons-outlined dashboard-learning-item-icon dashboard-learning-item-icon--mandatory"> laptop_mac </mat-icon> <h3 class="is-size-6 has-text-weight-medium mtxxs">Health & Safety</h3> <div fxFlex></div> <mat-icon class="is-size-6 mtxxs">calendar_today</mat-icon> <div class="is-size-6 has-text-weight-medium">06/02/2020</div> </div> <div fxLayout="row"> <div class="is-size-6half has-text-weight-medium mlsm">Booked</div> <div fxFlex></div> <mat-icon class="is-size-6">place</mat-icon> <div class="is-size-6half has-text-weight-medium">Leeds</div> </div> </div> <hr> <div fxLayout="column"> <div fxLayout="row"> <mat-icon class="material-icons-outlined dashboard-learning-item-icon dashboard-learning-item-icon--mandatory"> laptop_mac </mat-icon> <h3 class="is-size-6 has-text-weight-medium mtxxs">Health & Safety</h3> <div fxFlex></div> <mat-icon class="is-size-6 mtxxs">calendar_today</mat-icon> <div class="is-size-6 has-text-weight-medium">06/02/2020</div> </div> <div fxLayout="row"> <div class="is-size-6half has-text-weight-medium mlsm">Booked</div> <div fxFlex></div> <mat-icon class="is-size-6">place</mat-icon> <div class="is-size-6half has-text-weight-medium">Leeds</div> </div> </div> </mat-tab> (+ the identical code on the other 2 mat-tabs)

How do I make the content ie the 4 Health a Safety items stay inside the learningplan grid template area when the screen gets shorter? I know I can do this with a media query but I feel that I might not be using CSS grid correctly in this instance. Thanks

Stackblitz Added. Please widen and shorten the browser window to create the same affect I'm experiencing. The content fit's only when the page is at a certain height and width.

Answer 1

The minimum width and height of a grid column and row preset is auto . Using minmax(0, 1fr) prevents this error to happen. You can also set it to a fix size, like 100px .

 grid-template-columns: repeat(9, minmax(0, 1fr)); grid-template-rows: 0.25fr repeat(5, minmax(0, 1fr));

This code should fix your problem.

Source