我目前有一個(gè)這樣的html部分:

.projhero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 24px;
  max-width: 1200px;
  width: 100%;
}

.projcard {
  position: relative;
  height: 350px;
}

<section class="projects projhero" id="projects">
  <h1> Title </h1>
  <div class="card-grid">
    ........
  </div>
</section>

試試這個(gè):

.projhero {
  text-align: center;
  min-height: 100%;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 24px;
  max-width: 1200px;
  margin: auto;
}

.projcard {
  position: relative;
  height: 350px;
}


/*testing boxes*/

.box {
  background-color: tomato;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

<section class="projects projhero" id="projects">
  <h1>Title</h1>
  <div class="card-grid">
    <div class="box">Box</div>
    <div class="box">Box2</div>
    <div class="box">Box3</div>
    <div class="box">Box4</div>
  </div>
</section>

只需添加flex-direction:column；到projhero風(fēng)格

.projhero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  flex-direction: column;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 24px;
  max-width: 1200px;
  width: 100%;
}

.projcard {
  position: relative;
  height: 350px;
  text-align: center;
}

<section class="projects projhero" id="projects">
  <h1> Title </h1>
  <div class="card-grid">
    <div class="projcard">Card</div>
    <div class="projcard">Card</div>
    <div class="projcard">Card</div>
    <div class="projcard">Card</div>
  </div>
</section>