Question

我是CSS网格的新手，正在使用它来构建仪表板。

当我填充其中一个网格项目时，当视口高度发生变化时，内容会溢出它的容器。我只有在回家时才注意到它，而Mac屏幕比工作屏幕宽但短。

这是我的代码的样子：

.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)

当屏幕变短时，我该如何使内容（即4个健康安全项目）留在学习计划网格模板区域内？我知道我可以通过媒体查询来做到这一点，但是我觉得在这种情况下我可能没有正确使用CSS网格。谢谢

Stackblitz已添加。请加宽和缩短浏览器窗口，以创建与我相同的效果。仅当页面处于特定的高度和宽度时，内容才适合。

Answer 1

网格列和行预设的最小宽度和高度为const routes: Routes = [{ path: '', component: PagesComponent }, { path: 'customer', loadChildren: () => import('./customer/customer.module').then(m => m.CustomerModule) }, { path: 'organizer', loadChildren: () => import('./organizer/organizer.module').then(m => m.OrganizerModule), canActivate: [AuthGuardOrganizer] },。使用auto可防止发生此错误。您还可以将其设置为固定大小，例如minmax(0, 1fr)。

100px

此代码应该可以解决您的问题。

Source

CSS网格内容溢出

1 个答案: