Question

#hi {
      display: grid;
    grid-template-columns: auto auto;
}

#hi > div {
      border: 1px solid red;
    min-height: 300px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
  min-height: 300px;
}

img {
  width: 100%;
  height: auto;
}

<div id='hi'>
  <div><img src='http://wvs.topleftpixel.com/photos/scotia_plaza_tall_stitched.jpg'></div>
  <div>erhbv</div>
  <div>erhbv</div>
  <div></div>
</div>

注意-图像在嵌入时无法正常工作-CODEPEN网址有效：https://codepen.io/anon/pen/vVeWpL

到目前为止，我是网格的新手，并且喜欢它们，但是对此问题感到非常困惑。由于某些未知的原因，尽管网格的宽度为100％，但它仍会被图像拉伸。即使将宽度更改为10％，网格仍会拉伸。我还尝试过仅通过将宽度增加100％来确保父项宽度为100％，但这也失败了。

有人可以帮助使栅格宽度为50/50，并解释发生了什么情况吗？

Answer 1

有人可以帮助使栅格宽度为50/50，并解释发生了什么情况吗？

解决问题/要求的第一部分；要将网格划分为两个大小相等的列，您可以简单地指定离散尺寸，例如代替：

grid-template-columns: auto auto;

您可以改用：

grid-template-columns: 1fr 1fr;

#hi {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#hi>div {
  border: 1px solid red;
  min-height: 300px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

img {
  width: 100%;
  height: auto;
}

<div id='hi'>
  <div><img src='http://wvs.topleftpixel.com/photos/scotia_plaza_tall_stitched.jpg'></div>
  <div>erhbv</div>
  <div>erhbv</div>
  <div></div>
</div>

JS Fiddle demo。

或利用repeat()函数执行相同的操作：

grid-template-columns: repeat(2, 1fr);

#hi {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

#hi>div {
  border: 1px solid red;
  min-height: 300px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

img {
  width: 100%;
  height: auto;
}

<div id='hi'>
  <div><img src='http://wvs.topleftpixel.com/photos/scotia_plaza_tall_stitched.jpg'></div>
  <div>erhbv</div>
  <div>erhbv</div>
  <div></div>
</div>

JS Fiddle demo。

虽然在以上示例中使用了fr单元，但当然可以使用其他尺寸（例如50% 50% / repeat(2, 50%)等）； 1fr只是分配可用空间的小数单位，该单位由前面的数字确定。

关于您问题的后半部分，我只能对发生的事情进行观察，但不能参考规范，但是我相信使用auto关键字可以使grid-item（包含<div>的{{1}}）指示该元素的大小。不过，恐怕我不知道为什么会产生最终结果（不过，我怀疑其他人会提供更好的解释）。

参考：

repeat() function。

网格内的图像将网格项目的大小不成比例地拉伸到其他项目

1 个答案: