Grid嵌套布局问题：子元素无法按指定占比分配空间求助

现有如下HTML和CSS代码，期望右侧的6个元素按指定占比分配空间，但当前绿色元素尺寸小于蓝色元素：

• #producto1 .imagen1 → 30%
• #producto1 .precio → 6%
• #producto1 .descripcion → 14%
• #producto2 .imagen2 → 30%
• #producto2 .precio → 6%
• #producto2 .descripcion → 14%

原始代码 #

CSS #

#Productos {
  background-color: pink;
  height: 1000px;
}

#Productos #grid {
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
  width: 100%;
  height: 100%;
}

#Productos #grid img {
  grid-area: 1 / 1 / span 2 / span 1;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

#Productos #grid #grid2 {
  display: grid;
  grid-template-rows: 30% 6% 14% 30% 6% 14%;
  grid-area: 1 / 2 / span 2 / span 1;
}

#Productos #grid #grid2 #producto1 .imagen1 {
  grid-row: 1/ 1;
  width: 100%;
  max-height: 100%;
  background-color: blue;
  object-fit: contain;
}

#Productos #grid #grid2 #producto1 .precio {
  grid-row: 2/ 2;
  width: 100%;
  background-color: blue;
}

#Productos #grid #grid2 #producto1 .descripcion {
  grid-row: 3/ 3;
  width: 100%;
  background-color: blue;
}

#Productos #grid #grid2 #producto2 .imagen2 {
  grid-row: 4/ 4;
  width: 100%;
  max-height: 100%;
  background-color: green;
  object-fit: contain;
}

#Productos #grid #grid2 #producto2 .precio {
  grid-row: 5/ 5;
  width: 100%;
  background-color: green;
}

#Productos #grid #grid2 #producto2 .descripcion {
  grid-row: 6/ 6;
  width: 100%;
  background-color: green;
}

HTML #

<section id='Productos'>
  <h1>PRODUCTOS</h1>
  <div id="grid">
    <img src="/Users/admin/Desktop/Negocio/PremiumAlimentos.com/Resources/Media/feature-image-sqr.png" />
    <div id="grid2">
      <div id="producto1">
        <img class="imagen1" src="/Users/admin/Desktop/Negocio/PremiumAlimentos.com/Resources/Media/Diamond Naturals/Lamb&Rice_Adult/Main.png">
        <p class="precio">$000.00</p>
        <p class="descripcion">Descripcion aqui</p>
      </div>
      <div id="producto2">
        <img class="imagen2" src="/Users/admin/Desktop/Negocio/PremiumAlimentos.com/Resources/Media/Taste of the Wild/HighPrairie_Adult/Main.png">
        <p class="precio">$000.00</p>
        <p class="descripcion">Descripcion aqui</p>
      </div>
    </div>
  </div>
</section>

解决方案 #

你考虑的拆分Grid的思路是正确的。将#producto1和#producto2各自设置为Grid容器，让它们内部的元素按指定比例分配高度，同时调整外层#grid2的布局为两行，各占50%高度（单个产品的三个元素占比总和为30%+6%+14%=50%）。这样每个产品的元素都会严格按照比例占用对应空间，解决尺寸不一致的问题。

修改后的CSS #

#Productos {
  background-color: pink;
  height: 1000px;
}

#Productos #grid {
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
  width: 100%;
  height: 100%;
}

#Productos #grid img {
  grid-area: 1 / 1 / span 2 / span 1;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* 调整grid2为两行，各占50%高度 */
#Productos #grid #grid2 {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-area: 1 / 2 / span 2 / span 1;
  gap: 0;
}

/* 让producto1成为grid容器，内部按指定比例分配行 */
#Productos #grid #grid2 #producto1 {
  display: grid;
  grid-template-rows: 30% 6% 14%;
  height: 100%;
}

#Productos #grid #grid2 #producto1 .imagen1 {
  width: 100%;
  max-height: 100%;
  background-color: blue;
  object-fit: contain;
}

#Productos #grid #grid2 #producto1 .precio {
  width: 100%;
  background-color: blue;
  margin: 0;
}

#Productos #grid #grid2 #producto1 .descripcion {
  width: 100%;
  background-color: blue;
  margin: 0;
}

/* 让producto2成为grid容器，内部按指定比例分配行 */
#Productos #grid #grid2 #producto2 {
  display: grid;
  grid-template-rows: 30% 6% 14%;
  height: 100%;
}

#Productos #grid #grid2 #producto2 .imagen2 {
  width: 100%;
  max-height: 100%;
  background-color: green;
  object-fit: contain;
}

#Productos #grid #grid2 #producto2 .precio {
  width: 100%;
  background-color: green;
  margin: 0;
}

#Productos #grid #grid2 #producto2 .descripcion {
  width: 100%;
  background-color: green;
  margin: 0;
}

修改后的HTML（无需调整） #

<section id='Productos'>
  <h1>PRODUCTOS</h1>
  <div id="grid">
    <img src="/Users/admin/Desktop/Negocio/PremiumAlimentos.com/Resources/Media/feature-image-sqr.png" />
    <div id="grid2">
      <div id="producto1">
        <img class="imagen1" src="/Users/admin/Desktop/Negocio/PremiumAlimentos.com/Resources/Media/Diamond Naturals/Lamb&Rice_Adult/Main.png">
        <p class="precio">$000.00</p>
        <p class="descripcion">Descripcion aqui</p>
      </div>
      <div id="producto2">
        <img class="imagen2" src="/Users/admin/Desktop/Negocio/PremiumAlimentos.com/Resources/Media/Taste of the Wild/HighPrairie_Adult/Main.png">
        <p class="precio">$000.00</p>
        <p class="descripcion">Descripcion aqui</p>
      </div>
    </div>
  </div>
</section>

关键调整说明 #

1. 将#grid2的grid-template-rows改为1fr 1fr，让两个产品各占右侧列的50%高度。
2. 为#producto1和#producto2添加display: grid和对应的grid-template-rows，让每个产品内部的三个元素按指定比例分配高度。
3. 为#producto1和#producto2设置height: 100%，确保它们占满#grid2分配的行高度。
4. 移除p标签的默认margin，避免额外间距影响布局比例。

内容的提问来源于stack exchange，提问作者Pablo Gaxiola