CSS网格列没有开始和结束的预期

Question

CSS网格新手并遇到一个奇怪的问题。看看我放在一起的codepen演示：https://codepen.io/bmarshall511/pen/OjYXZJ

相同的CSS应用于两个不同的div（.grid-3-10），一个带有和h1，另一个带有p，但它们从不同的地方开始。无法弄清楚原因，任何帮助都会受到赞赏。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这就是原因：

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

您已根据内容的大小设置列宽。

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

这将按预期工作：

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

revised codepen

这是一种看待这种行为的好方法：

Firefox网格大纲

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

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

Answer 2

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

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