为什么图像在 CSS 网格中重叠？

Question

我正在尝试使用 CSS 网格构建产品页面。出于某种原因，我的图像一直重叠，而不是彼此下方放置。

我在下面的代码中模仿了我的代码（没有所有的 drupal fluf）。我在那里有同样的问题。我尝试使用单个网格以及网格中的网格（如我的示例）

#mygrid {
 display: grid;
 grid-template-columns: 300px 1fr;
 grid-template-rows: auto;
 grid-template-areas: 
  "images title"
  "images model"
  "images price"
  ;
}

#mygrid .items  {
 background-color: red;
 grid-area: images;
 display: grid;
 grid-template-columns: 100px 200px;
 grid-template-rows: 100px 100px auto;
 grid-template-areas: 
  "thumbs main"
    "thumbs main"
    "thumbs main"
  ;
}

#mygrid .items .item  {
 grid-area: thumbs;

}

#mygrid .items .item img{
  //why are there overlapping??
 width: 100px;
 height: auto;
  
}

#mygrid .items .item:first-child  {
 grid-area: main;
   
}

#mygrid .items .item:first-child img{
 width: 200px;
 height: auto;
}

<div id="mygrid">
  <div class="items">
    <div class="item">
      <img src="http://lorempixel.com/100/100/sports">
    </div>
    <div class="item">
      <img src="http://lorempixel.com/100/100/food">
    </div>
    <div class="item">
      <img src="http://lorempixel.com/100/100/cities">
    </div>
    <div class="item">
      <img src="http://lorempixel.com/100/100/nature">
    </div>
  </div>
  <div class=info>MY TITLE</div>
  <div class=info>My Description</div>
  <div class=prijs>My Price</div>
  
</div>

我正在尝试将所有图像（第一张除外）放在名为 "thumbs" 的第一个网格列中。（这行得通，但会互相摔倒）

我将第一张图片放在第二列中，尺寸更大。（这个有效）

我很确定我遗漏了一些基本的东西，但我已经尝试（和谷歌搜索）了几个小时。也许另一双眼睛可以启发我。

这是单格版本。这里的问题是第一张图片不会把自己放在正确的位置。

https://jsfiddle.net/wrpt5g3b/1/

#mygrid {
 display: grid;
  grid-template-columns: 1fr 2fr 3fr;
 grid-template-rows: 25px 25px 25px auto;
  
 grid-template-areas: 
  "aside main model"
  "aside main price"
  "aside main input"
  "aside . ."
  ;
}

#mygrid .items  {
}

#mygrid .items .item  {
 grid-area: aside;
}

#mygrid .items .item img{
 width: 100px;
 height: auto;
  
}

#mygrid .items .item:first-child  {
 grid-area: main;   //why is this ignoring it's place?
  justify-self: stretch;
}

#mygrid .items .item:first-child img{
 width: 200px;
 //height: auto;
}
#mygrid .title {
  grid-area: model;
 justify-self: stretch;
} 

#mygrid .info {
  grid-area: input;
 justify-self: stretch;
} 

#mygrid .price {
  grid-area: price;
 justify-self: stretch;
}

<div id="mygrid">
  <div class="items">
    <div class="item">
      <img src="http://lorempixel.com/100/100/sports">
    </div>
    <div class="item">
      <img src="http://lorempixel.com/100/100/food">
    </div>
    <div class="item">
      <img src="http://lorempixel.com/100/100/food">
    </div>
    <div class="item">
      <img src="http://lorempixel.com/100/100/food">
    </div>
  </div>
  <div class=title>MY TITLE</div>
  <div class=info>My Description</div>
  <div class=price>My Price</div>
  
</div>

Answer 1

好的，我找到了奇怪的原因。

以防其他人遇到类似情况：

将放置在网格中的 HTML 元素都需要在 DOM 中处于同一级别，并且是网格元素的直接后代。
当您在网格元素的 html 元素中有 html 元素时，您需要为下层 html 元素创建一个新的网格元素。

Answer 2

问题是您对所有图像容器应用了相同的网格区域名称。

每个 .item 元素被命名为 thumbs.

你的HTML

<div class="items">
  <div class="item">
    <img src="http://lorempixel.com/100/100/sports">
  </div>
  <div class="item">
    <img src="http://lorempixel.com/100/100/food">
  </div>
  <div class="item">
    <img src="http://lorempixel.com/100/100/cities">
  </div>
  <div class="item">
    <img src="http://lorempixel.com/100/100/nature">
  </div>
</div>

你的CSS

#mygrid .items  {
   background-color: red;
   grid-area: images;
   display: grid;
   grid-template-columns: 100px 200px;
   grid-template-rows: 100px 100px auto;
   grid-template-areas: 
                        "thumbs main"
                        "thumbs main"
                        "thumbs main"
   ;
}

.item {
   grid-area: thumbs;
}

.item:first-child  {
   grid-area: main;
}

.item img {
   width: 100px;
   height: auto;
}

.item:first-child img {
   width: 200px;
   height: auto;
}

事情是这样的

第一个图像容器命名为 main，覆盖 thumbs。根据您的 grid-template-areas 规则，此容器位于第二列。
第二个、第三个和第四个图像容器的名称为thumbs。因为三个元素同名，前两个被忽略，最后一个被渲染（per the rules of HTML parsing，一般是根据源文档中出现的顺序）。
因此，最终没有重叠图像。您得到的是第二列中的 image1 和第一列中的 image4。
image1 比 image4 高，因为它的宽度是原来的两倍（根据您的 CSS）。

解决方案

为每个项目指定一个唯一的网格区域名称。

#mygrid {
 display: grid;
 grid-template-columns: 300px 1fr;
 grid-template-rows: auto;
 grid-template-areas: 
  "images title"
  "images model"
  "images price"
  ;
}

.items {
 background-color: red;
 grid-area: images;
 display: grid;
 grid-template-columns: 100px 200px;
 grid-template-rows: 100px 100px auto;
 grid-template-areas: 
              "thumbs2 main"
              "thumbs3 main"
              "thumbs4 main"    
  ;
}

.item:first-child   { grid-area: main; }
.item:nth-child(2)  { grid-area: thumbs2; }
.item:nth-child(3)  { grid-area: thumbs3; }
.item:nth-child(4)  { grid-area: thumbs4; }

.item img {
 width: 100px;
 height: auto;
}

.item:first-child img {
 width: 200px;
 height: auto;
}

<div id="mygrid">
  <div class="items">
    <div class="item">
      <img src="http://lorempixel.com/100/100/sports">
    </div>
    <div class="item">
      <img src="http://lorempixel.com/100/100/food">
    </div>
    <div class="item">
      <img src="http://lorempixel.com/100/100/city">
    </div>
    <div class="item">
      <img src="http://lorempixel.com/100/100/nature">
    </div>
  </div>
  <div class=info>MY TITLE</div>
  <div class=info>My Description</div>
  <div class=prijs>My Price</div>
</div>

为什么图像在 CSS 网格中重叠？

Why are images overlapping in CSS Grid?

html

css

css-grid

jsFiddle