logo标签列表

CSS Grid：Grid-gap导致项目溢出？

htmlcsscss-grid
3
如果有人能给我一些帮助，我在表格布局方面遇到了一些问题。我理解的是，如果我的容器是固定宽度的，那么在`grid-template-columns`中使用`fr`代替百分比宽度将仅考虑可用的自由空间，因此`grid-gap`不会导致网格溢出其容器，正如这个答案所描述的：

解决方法是，尝试使用 fr 单位而不是百分比单位，它只适用于自由空间。这意味着 fr 长度是在应用任何 grid-gap 长度之后计算的。

还有这里：

fr 单位仅适用于容器中的自由空间。

但是我的代码似乎仍然导致网格溢出（我只关心水平方向）： https://codepen.io/nwoodward/pen/bGLpBbP 

* {
  margin: 0;
}

.container {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background-color: firebrick;
}

.form {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  margin: 2rem;
  width: 25rem;
  background-color: white;
}
.content {
  border: 1px solid red;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 4rem;
  width: 100%;
}
<div class="container">
  <form class="form">
    <div class="content">
      <div class="field">
        <label for="title" class="label">Title</label>
        <input type="text" placeholder="Job Title" id="title" class="input">
        <i class="icon icon--success"></i>
        <i class="icon icon--fail">
        </i>
        <small class="error-msg"></small>
      </div>
      <div class="field">
        <label for="company" class="label">Company</label>
        <select name="company" id="company" class="input">
            <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="location" class="label">Location</label>
        <select name="location" id="location" class="input">
            <!-- options added in js -->
        </select>                        
        <i class="icon"></i>
        <i class="icon"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="wage" class="label">Wage</label>
        <input type="text" placeholder="Wage" id="wage" class="input">
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="type" class="new-job__label">Type</label>
        <select name="type" id="type" class="input">
          <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="position" class="label">Position</label>
        <select name="position" id="position" class="input">
          <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="pqe" class="label">PQE</label>
        <select name="pqe" id="pqe" class="input">
            <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="featured" class="label">Featured</label>
        <select name="featured" id="featured" class="input">
          <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>
    </div>
    <button class="new-job__submit">Submit</button>

  </form>
</div>

我想这个问题的部分原因在于输入元素有某种固定的最小宽度，但即使如此，将.field或inputs的宽度固定为适合的较小值也不是我想要的解决方法。

*编辑：输入溢出 overflow

**编辑：div没有溢出 not overflowing

为什么要使用 grid-gap: 4rem？这太多了，会导致溢出。 - Arman Ebrahimi
1
@ArmanEbrahimi 即使是更小的间隙也可能导致溢出。间隙并不是导致溢出的原因。这是一个概念性问题，由于给父元素设置了 fixed/max-height 但没有添加适当的溢出规则而引起的。要么具有 fixed 或 max-height 的父元素只需要将 overflow: auto 作为溢出规则，要么需要将属性更改为 min-height。 - tacoshy
嗨@ArmanEbrahimi - 我使用了那个大间隙来强调问题 :) 我可以使输入和字段变窄以适应，但那样我就需要手动计算列应该减去沟槽的宽度 - 这肯定是违背初衷的。 - NickW
就像我说的那样，这是一个概念性的问题。对于你的水平溢出，除了检查你的断点并添加一个媒体查询来将布局更改为单列之外，你没有太多可以做的了。 - tacoshy
已经在原帖中添加了一张图片来展示我的意思！ - NickW
显示剩余2条评论
2个回答
0
问题的原因是您给父元素设置了固定高度：
.container { height: 100vh; }

要解决这个问题，只需将属性从height更改为min-height。容器将会自动增长，而不是让内容溢出：

* {
  margin: 0;
}

.container {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  background-color: firebrick;
}

.form {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  margin: 2rem;
  width: 25rem;
  background-color: white;
}
.content {
  border: 1px solid red;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 4rem;
  width: 100%;
}
<div class="container">
  <form class="form">
    <div class="content">
      <div class="field">
        <label for="title" class="label">Title</label>
        <input type="text" placeholder="Job Title" id="title" class="input">
        <i class="icon icon--success"></i>
        <i class="icon icon--fail">
        </i>
        <small class="error-msg"></small>
      </div>
      <div class="field">
        <label for="company" class="label">Company</label>
        <select name="company" id="company" class="input">
            <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="location" class="label">Location</label>
        <select name="location" id="location" class="input">
            <!-- options added in js -->
        </select>                        
        <i class="icon"></i>
        <i class="icon"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="wage" class="label">Wage</label>
        <input type="text" placeholder="Wage" id="wage" class="input">
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="type" class="new-job__label">Type</label>
        <select name="type" id="type" class="input">
          <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="position" class="label">Position</label>
        <select name="position" id="position" class="input">
          <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="pqe" class="label">PQE</label>
        <select name="pqe" id="pqe" class="input">
            <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="featured" class="label">Featured</label>
        <select name="featured" id="featured" class="input">
          <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>
    </div>
    <button class="new-job__submit">Submit</button>

  </form>
</div>

嗨@tacoshy，感谢您的回复，但不幸的是我不确定这解决了我的问题 - 我关心的是水平溢出而不是垂直溢出。我已经在原始帖子中添加了一张图片来展示我所说的溢出情况（您的代码片段中也会发生这种情况）。再次感谢。 - NickW
@NickW，你可以对x轴做同样的操作。此外，你应该考虑在断点处添加“媒体查询”，以将布局更改为单列网格。 - tacoshy
我希望内容能够按列的大小进行缩放 - 这里有足够的空间来实现。repeat(2, 1fr)应该可以实现，但是却没有。 - NickW
因为如果屏幕在某些时候变得太小，它将始终会中断（断点）。几乎每个网站都是如此。这就是为什么我说这是概念性的，为什么你应该考虑媒体查询。如果只是单个输入字段，则还可以将输入宽度设置为100％，以仅允许其使用列宽。 - tacoshy
将输入替换为div：https://codepen.io/nwoodward/pen/bGLpBbP，除非您告诉我选择的最小大小导致问题，否则我不确定您所说的是否正确-它可以正确缩放。 - NickW
0

将代码更新如下（相关问题以了解第一段代码的调整：为什么长元素使用minmax(0, 1fr)有效而1fr无效？）

* {
  margin: 0;
}

.container {
  display: flex;
  justify-content: center;
  background-color: firebrick;
}

.form {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  margin: 2rem;
  width: 25rem;
  background-color: white;
}
.content {
  border: 1px solid red;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr)); /* here */
  grid-gap: 4rem;
}

/* here */
input {
  max-width: 100%;
  box-sizing: border-box;
}
<div class="container">
  <form class="form">
    <div class="content">
      <div class="field">
        <label for="title" class="label">Title</label>
        <input type="text" placeholder="Job Title" id="title" class="input">
        <i class="icon icon--success"></i>
        <i class="icon icon--fail">
        </i>
        <small class="error-msg"></small>
      </div>
      <div class="field">
        <label for="company" class="label">Company</label>
        <select name="company" id="company" class="input">
            <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="location" class="label">Location</label>
        <select name="location" id="location" class="input">
            <!-- options added in js -->
        </select>                        
        <i class="icon"></i>
        <i class="icon"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="wage" class="label">Wage</label>
        <input type="text" placeholder="Wage" id="wage" class="input">
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="type" class="new-job__label">Type</label>
        <select name="type" id="type" class="input">
          <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="position" class="label">Position</label>
        <select name="position" id="position" class="input">
          <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="pqe" class="label">PQE</label>
        <select name="pqe" id="pqe" class="input">
            <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>

      <div class="field">
        <label for="featured" class="label">Featured</label>
        <select name="featured" id="featured" class="input">
          <!-- options added in js -->
        </select>
        <i class="icon icon--success"></i>
        <i class="icon icon--fail"></i>
        <small class="error-msg"></small>
      </div>
    </div>
    <button class="new-job__submit">Submit</button>

  </form>
</div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接