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

Question

CSS 网格的新手和运行进入一个奇怪的问题。看看我放在一起的codepen演示：https://codepen.io/bmarshall511/pen/OjYXZJ

相同的 CSS 应用于两个不同的 div (.grid-3-10)，一个带有 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>

Answer 1

将 justify-content: baseline; 添加到 .grid-3-10

示例：https://codepen.io/anon/pen/ayrZga

Answer 2

这是原因：

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

您已将列宽设置为根据内容调整大小。

因为两个例子中的内容不同，所以大小也会不同

这将如您所愿：

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

现在所有列的宽度都相等，基于容器中的空闲 space。

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

revised codepen

这里有一个很酷的方式来查看此行为的结果：

Firefox 网格大纲

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

此处有更多详细信息：https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts

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

CSS grid column not starting and ending where expected

css

css-grid