Question

我是CSS网格的新手，我试图显示三张卡片。如下图所示，在数位板尺寸的平板电脑上，第三张卡片显示在下一行，但未显示在网格框中，第二行的卡片顶部与第一行的卡片重叠。我该如何解决？

外观

CSS

.skills {
  background-color: #fff;
  .skills-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    padding: 0 4rem;
    grid-gap: 3rem;

    .example-card {
      border-radius: 5px;
      margin-top: -10rem;
      margin-bottom: 15%;
      z-index: 6;
      padding: 0 !important;

      &__header {
        height: 10rem;
        display: flex;
        align-items: center;
        text-align: center;
        font-weight: 600 !important;

        mat-card-subtitle {
          @include respond(tab-port) {
            display: none;
          }
        }
      }

      .card-img {
        height: 30rem;
        width: 100% !important;
        margin: 0 !important;

        @include respond(tab-land) {
          height: 20rem;
        }
      }
    }
  }
}

HTML

<section class="skills">
  <div class="skills-container">
    <mat-card class="example-card">
      <mat-card-header class="example-card__header">
        <mat-card-title>Front End Development</mat-card-title>
        <mat-card-subtitle>HTML, CSS, Javascript, Angular</mat-card-subtitle>
      </mat-card-header>
      <img class="card-img" mat-card-image src="/assets/images/front-end.jpg" alt="front-end">
    </mat-card>
    <mat-card class="example-card">
      <mat-card-header class="example-card__header">
        <mat-card-title>Back End Development</mat-card-title>
        <mat-card-subtitle>Node.js, Express, MongoDB, Socket.io,...</mat-card-subtitle>
      </mat-card-header>
      <img class="card-img" mat-card-image src="/assets/images/nodejs.jpeg" alt="Photo of a Shiba Inu">
    </mat-card>
    <mat-card class="example-card">
      <mat-card-header class="example-card__header">
        <mat-card-title>Web Design</mat-card-title>
        <mat-card-subtitle>CSS, SCSS, Responsive design,...</mat-card-subtitle>
      </mat-card-header>
      <img class="card-img" mat-card-image src="/assets/images/responsive.jpg" alt="Photo of a Shiba Inu">
    </mat-card>
  </div>
</section>

编辑：该卡的边距顶端可能为-10rem，我该如何确保下一行的卡没有该值？

Answer 1

您可能要删除.example_card上的负边距

CSS网格：在小型设备上，卡不显示在网格框中

1 个答案: