为什么CSS Grid中的图像重叠？

Question

我正在尝试使用CSS Grid构建产品页面。出于某种原因，我的图像保持重叠，而不是位于彼此之下。

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

https://jsfiddle.net/e28mc4f5/1/

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我试图将所有图像（第一个除外）放在名为＆＃34; thumb＆＃34;的第一个网格列中。 （这种方法有效，但相互之间）

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

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

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

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

＆＃13;

＆＃13;

#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;
} 

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

每个.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的两倍。

<强> 解决方案

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

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

jsFiddle

Answer 2

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

如果其他人遇到类似的事情：

将放置在网格中的HTML元素都需要位于DOM中的同一级别，并且是网格元素的直接后代。
如果在网格元素的html元素中包含html元素，则需要为较低层html元素创建新的网格元素。