css 网格内的网格混乱

mgdq6dx1 于 2023-04-08 发布在其他

关注(0)|答案(1)|浏览(110)

我有这样的HTML和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;
}

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

但是绿色的三个元素比蓝色的两个元素小

我希望这6个元素（3个蓝色元素和3个绿色元素）使用它们各自行的空间：
#producto1 .image1 -〉30% #producto1 .percio -〉6% #producto1 .descripcion -〉14% #producto2 .image2 -〉30% #producto2 .percio -〉6% #producto2 .descripcion -〉14%
也许我应该在producto 1中创建一个新的3行网格，在producto 2中创建另一个3行网格，而不是试图将6个元素排列在一个6行网格中。但这听起来像是一回事，只是更复杂，但也许这将解决大小问题。我会去尝试，但请帮助

css

来源：https://stackoverflow.com/questions/75936494/grid-inside-a-grid-mess

1条答案

按热度按时间

5lhxktic1#

你的代码有点复杂。2你在你的风格中使用了ID的ID，这是不必要的。3 ID是唯一的。4检查代码片段，它会有帮助。

body,
html {
  /* needed for user agent */
  margin: 0;
  padding: 0;
}

h1 {
  margin: 0;
  margin-block-start: 0;
  /* needed for user agent */
  margin-block-end: 0;
  /* needed for user agent */
  padding: 1em;
}

#Productos {
  background-color: pink;
  height: 100vh;
}

#Productos .grid1 {
  /* .grid1 as a class, if you need to reuse it */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  /* only 1 row here, but you can add others if you want */
  width: 100%;
  height: calc(100% - 5em);
  /* 1.5em font-size = 3em total height + 1em padding top + 1em padding bottom*/
}

#Productos .grid1 .grid1Img {
  /* left div, img background, ethier to manipulate */
  background-image: url('https://picsum.photos/id/237/600/400');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.grid2 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 50% 50%;
}

#producto1 .grid2Img {
  background-image: url('https://picsum.photos/id/42/600/400');
}

#producto2 .grid2Img {
  background-image: url('https://picsum.photos/id/128/600/400');
}

.grid2Img {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: calc(100% - 5em);
}

.grid2 .info {
  text-align: center;
}

<section id='Productos'>
  <h1>PRODUCTOS</h1>
  <div class="grid1">
    <div class="grid1Img"></div>
    <div class="grid2">
      <div id="producto1">
        <div class="grid2Img"></div>
        <div class="info">
          <p class="precio">$000.00</p>
          <p class="descripcion">Descripcion aqui</p>
        </div>
      </div>
      <div id="producto2">
        <div class="grid2Img"></div>
        <div class="info">
          <p class="precio">$000.00</p>
          <p class="descripcion">Descripcion aqui</p>
        </div>
      </div>
    </div>
  </div>
</section>

赞(0）回复(0）举报 2023-04-08

我来回答

css 网格内的网格混乱

1条答案

相关问题

热门标签

最新问答