主页 / 问题 / 1014767
Accepted
Артур Франк
Asked:2020-08-18 18:14:31 +0000 UTC2020-08-18 18:14:31 +0000 UTC

CSS GRID 自动调整不会改变元素的宽度

  • 772

再会！

决定赶上 CSS GRID 并遇到（对我来说）对调整浏览器客户端区域大小的莫名其妙的反应。它不是平滑地改变主块中包含的元素的宽度，而是将它们放在新行上：

.content-div 
{
  background: black;
}

.center-div {
  min-width: 320px;
  max-width: 1170px;
  min-height: 320px;
  margin: 0 auto;
  overflow: hidden
}

.two-div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 575px));
  /* либо minmax(300px, 1fr); тоже не работает.*/
  grid-gap: 5px;
}

.children {
  background-color: white;
}
<div class="content-div">
  <div class="center-div two-div">
    <div class="children"></div>
    <div class="children"></div>
  </div>
</div>

如果块明确指定 minmax(300px, 575px)

在此处输入图像描述

我想达到这样的结果：舞台大小> 1170px，center-div的大小不超过11​​70px，但内部元素不等于最小宽度大小。当工作空间缩小时，center-div 中的元素缩小到等于 min-width 的大小，然后移动到新行。

html

2 个回答

  1. Best Answer

    或 minmax(300px, 1fr); 也不行。

    1fr 可以正常使用这个函数，将每个元素拉伸到总共 1170px 宽度，这是在样式中设置的。也许你搞砸了什么？

    CodePen 上的结果

    body {
  background: #000;
}

.center-div {
  min-width: 320px;
  max-width: 1170px;
  min-height: 320px;
  margin: 0 auto;
  overflow: hidden
}

.two-div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  /* либо minmax(300px, 1fr); тоже не работает. */
  grid-gap: 5px;
}

.children {
  background-color: white;
}
    <div class="content-div">
  <div class="center-div two-div">
    <div class="children"></div>
    <div class="children"></div>
  </div>
</div>

    • 1

  2. 为什么复杂？
    你有.center-div严格规定的限制，只要让父级.children- grid-template-columns: repeat(2, 1fr)，他们不会或多或少的限制。

    body {
  background: #000;
}

.center-div {
  min-width: 320px;
  max-width: 1170px;
  min-height: 320px;
  margin: 0 auto;
  overflow: hidden
}

.two-div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 5px;
}

.children {
  background-color: white;
}
    <div class="content-div">
  <div class="center-div two-div">
    <div class="children"></div>
    <div class="children"></div>
  </div>
</div>

    • 0

相关问题