CSS网格列未按预期开始和结束

Question

CSS网格列未按预期开始和结束

3

新手接触CSS网格布局时遇到了一个奇怪的问题。请看我准备好的Codepen演示：https://codepen.io/bmarshall511/pen/OjYXZJ。应用于两个不同div（.grid-3-10）的相同CSS，一个带有h1，另一个带有p，但它们开始位置不同。无法弄清原因，需要任何帮助。

.grid-3-10 {
  margin-left: auto;
  margin-right: auto;
  max-width: 960px;
  width: 100%;
  display: grid;
  grid-column-gap: 40px;
  grid-template-columns: repeat(12, auto);
}

.content {
  grid-column-end: 11;
  grid-column-start: 3;
}

<div class="grid-3-10">
  <div class="content">
    <h1>Title</h1>
  </div>
</div>
<div class="grid-3-10">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec mi cursus, faucibus orci sit amet, suscipit urna. Vestibulum bibendum varius ante bibendum imperdiet. Nullam et erat at mi sodales maximus eget nec quam. Orci varius natoque penatibus
      et magnis dis parturient montes, nascetur ridiculus mus. Donec accumsan enim est, et tempus nisl dapibus in. Praesent consequat a nibh quis dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec vitae iaculis dolor. Proin
      imperdiet pharetra euismod. Aliquam nulla erat, hendrerit nec nibh ut, sodales pretium eros.</p>
  </div>
</div>

- Ben Marshall

2个回答

-1

将 .grid-3-10 添加 justify-content: baseline; 示例：https://codepen.io/anon/pen/ayrZga

- Ovidiu Unguru

我需要它从第三列开始，而不是第一列。 - Ben Marshall

我编辑了我的回答，请告诉我这对你是否有效。 - Ovidiu Unguru

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

这是原因：

grid-template-columns: repeat(12, auto);

你已经将列宽设置为根据其内容大小自适应。

由于两个示例中的内容不同，因此大小会有所不同。

以下内容将按预期工作：

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

现在所有列都是等宽的，基于容器中的可用空间。

.grid-3-10 {
  margin-left: auto;
  margin-right: auto;
  max-width: 960px;
  width: 100%;
  display: grid;
  grid-column-gap: 40px;
  grid-template-columns: repeat(12, 1fr);
}

.content {
  grid-column-end: 11;
  grid-column-start: 3;
}

<div class="grid-3-10">
  <div class="content">
    <h1>Title</h1>
  </div>
</div>
<div class="grid-3-10">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec mi cursus, faucibus orci sit amet, suscipit urna. Vestibulum bibendum varius ante bibendum imperdiet. Nullam et erat at mi sodales maximus eget nec quam. Orci varius natoque penatibus
      et magnis dis parturient montes, nascetur ridiculus mus. Donec accumsan enim est, et tempus nisl dapibus in. Praesent consequat a nibh quis dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec vitae iaculis dolor. Proin
      imperdiet pharetra euismod. Aliquam nulla erat, hendrerit nec nibh ut, sodales pretium eros.</p>
  </div>
</div>

修订版 CodePen

这是一个很酷的方法来演示这种行为：

Firefox 网格轮廓

在 Firefox 开发者工具中，当您检查网格容器时，CSS 声明中有一个微小的网格图标。单击它会在页面上显示您的网格轮廓。

更多详情请参考：https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts