J'ai des problèmes avec une grille CSS dont la hauteur n'est pas celle à laquelle je m'attendais, quelles erreurs pourrais-je commettre ?

Question

J'apprends actuellement les grilles CSS et on m'a demandé de créer cette carte en la décomposant en grilles. Ci-joint une photo de la grille que je souhaite réaliser.

Il existe en fait une grille plus grande (appelée grille de profil en CSS) dans laquelle toutes ces cartes sont disposées, et la hauteur de cette grille plus grande est de 255 px. Je veux que la carte et la grille à l'intérieur de la carte suivent cette hauteur de 255 pixels, j'ai réussi à obtenir la hauteur de la carte elle-même correcte, mais pas la hauteur de la grille intérieure. La grille intérieure elle-même se compose de 2 lignes, la première ligne est l'image et a une hauteur de 150 px, la deuxième ligne est définie sur 1fr, mais je n'arrive pas à obtenir que la grille intérieure ait une hauteur de 255 px. Quelque chose s'est mal passé ?

https://i.stack.imgur.com/g9Eh6.png

Voici le lien jsFiddle : https://jsfiddle.net/40tnwd1o/

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
body {
  font-family: roboto;
}

p {
  display: block;
  margin: auto;
}

.profile-card {
  margin-top: 0px;
  width: 150px;
  height: 255px;
  border: none;
  box-shadow: 0px 0px 5px 3px rgba(73, 73, 73, 0.301);
}

.profile-grid {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 150px 1fr;
}

.social-ava {
  width: 100%;
  height: 100%;
  background-color: gray;
  transition: opacity 0.15s;
}

.social-ava:hover {
  opacity: 0.8;
}

.social-text {
  height: 100%;
  padding: 8px;
}

.social-name {
  margin-top: 0px;
  cursor: pointer;
  transition: color 0.15s;
}

.social-name:hover {
  color: rgb(52, 98, 167);
}

.mutual-grid {
  display: grid;
  grid-template-columns: 20px 1fr;
  margin-top: 6px;
  align-items: center;
}

.mutual-pic {
  width: 20px;
  height: 20px;
  background-color: gray;
  border-radius: 10px;
  cursor: pointer;
}

.mutual-friend {
  font-size: 12px;
  color: rgb(80, 80, 80);
  cursor: pointer;
}

.mutual-friend:hover {
  text-decoration: underline;
}

.social-add {
  margin-top: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  color: white;
  background-color: rgb(25, 118, 240);
  font-size: 12px;
  cursor: pointer;
  transition: opacity 0.1s;
}

.social-add:hover {
  opacity: 0.8;
}

<!-- profile card start -->
<div class="profile-card">

  <!-- profile grid start -->
  <div class="profile-grid">

    <!-- row 1: picture start -->
    <div class="image-container">
      <div class="social-ava"></div>
      <!-- placeholder for profile picture -->
    </div>
    <!-- row 1: picture end -->

    <!-- row 2: info start -->
    <div class="social-text">
      <p class="social-name"><strong>Name</strong></p>

      <div class="mutual-grid">
        <!-- grid for mutual friends info start -->
        <div class="mutual-pic"></div>
        <!-- placeholder for mutual's profile picture -->
        <p class="mutual-friend">2 mutual friends</p>
      </div>
      <!-- grid for mutual friends info end -->

      <button class="social-add">Add Friend</button>
    </div>
    <!-- row 2: info end -->

  </div>
  <!-- profile grid end -->

</div>
<!-- profile card end -->

Answer 1

i.stack.imgur.com/g9Eh6.png C'est la hauteur de profile-grid 的高度，而不是 profile-card。 profile-card 上设置了 255px.

Vous devez être présent profile-grid 上添加 height:100%.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
body {
  font-family: roboto;
}

p {
  display: block;
  margin: auto;
}

.profile-card {
  margin-top: 0px;
  width: 150px;
  height: 255px;
  border: none;
  box-shadow: 0px 0px 5px 3px rgba(73, 73, 73, 0.301);
}

.profile-grid {
  display: grid;
  height: 100%;
  grid-template-columns: 100%;
  grid-template-rows: 150px 1fr;
}

.social-ava {
  width: 100%;
  height: 100%;
  background-color: gray;
  transition: opacity 0.15s;
}

.social-ava:hover {
  opacity: 0.8;
}

.social-text {
  height: 100%;
  padding: 8px;
}

.social-name {
  margin-top: 0px;
  cursor: pointer;
  transition: color 0.15s;
}

.social-name:hover {
  color: rgb(52, 98, 167);
}

.mutual-grid {
  display: grid;
  grid-template-columns: 20px 1fr;
  margin-top: 6px;
  align-items: center;
}

.mutual-pic {
  width: 20px;
  height: 20px;
  background-color: gray;
  border-radius: 10px;
  cursor: pointer;
}

.mutual-friend {
  font-size: 12px;
  color: rgb(80, 80, 80);
  cursor: pointer;
}

.mutual-friend:hover {
  text-decoration: underline;
}

.social-add {
  margin-top: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  color: white;
  background-color: rgb(25, 118, 240);
  font-size: 12px;
  cursor: pointer;
  transition: opacity 0.1s;
}

.social-add:hover {
  opacity: 0.8;
}

<!-- profile card start -->
<div class="profile-card">

  <!-- profile grid start -->
  <div class="profile-grid">

    <!-- row 1: picture start -->
    <div class="image-container">
      <div class="social-ava"></div>
      <!-- placeholder for profile picture -->
    </div>
    <!-- row 1: picture end -->

    <!-- row 2: info start -->
    <div class="social-text">
      <p class="social-name"><strong>Name</strong></p>

      <div class="mutual-grid">
        <!-- grid for mutual friends info start -->
        <div class="mutual-pic"></div>
        <!-- placeholder for mutual's profile picture -->
        <p class="mutual-friend">2 mutual friends</p>
      </div>
      <!-- grid for mutual friends info end -->

      <button class="social-add">Add Friend</button>
    </div>
    <!-- row 2: info end -->

  </div>
  <!-- profile grid end -->

</div>
<!-- profile card end -->