CSS网格列不跨越多列答案

【问题标题】：CSS grid-column not spanning multiple columnsCSS网格列不跨越多列
【发布时间】：2019-10-27 07:19:14
【问题描述】：

我正在尝试使用 CSS 网格来设置一个包含三列的表单：第一列用于显示将在第二列中列出的输入的标签。第三列用于获取表单在页面上的正确间距，并允许表单缩放到页面大小。

我可以将表单标签和表单输入分别分成第一列和第二列，但是当我无法在这两列之间创建一个新的表单部分时，它将位于第一列labels或第二列data。

.formContainer {
  display: grid;
  grid-template-columns: [labels] auto [data] auto 1fr;
  grid-auto-rows: auto;
  grid-row-gap: 5px;
  margin-top: 3%;
  margin-left: 12%;
  margin-right: 3%;
}

.formContainer>label {
  grid-column: labels;
}

.formContainer>div {
  grid-column: data;
}

.matches {
  grid-column-start: labels !important;
  grid-column-end: data !important;
}

<div class='formContainer'>
  <label>
     <span>Name</span>
  </label>
  <div>
    <input type="text" />
  </div>
  <div class='matches'>
    <div>No matches yet!</div>
  </div>
</div>

我还尝试将 matches div 设为不同的 HTML 元素，例如 article 或 span，但这也不起作用。对于试图弄清楚如何使matches 类跨越这两列的任何帮助，我们将不胜感激。

【问题讨论】：

我们真的需要知道这应该是什么样子。
如果你运行代码sn-p，你是否看到“还没有匹配！”直接显示在“名称”元素下？我希望它看起来像“还没有匹配项！”居中在“名称”元素和输入之间，而不是在左侧或右侧。
您可以使用grid-column: span 2 到matches 元素以允许占据两列，然后将text-align: center 添加到该空间的中心 - 请参阅jsfiddle.net/p9xenf7q（如果解决你的问题）
感谢@kukkuz，修复了它。我尝试在匹配类本身中执行 grid-column: span 2 命令，但它的效果与您在小提琴中执行的方式不同。
这是因为.formContainer>div 比matches 更具体 - 请注意，我使用的是.formContainer > .matches

标签： html css css-grid

【解决方案1】：

根据我上面的 cmets，您可以使用 grid-column: span 2 到 matches 元素以使其占据两列，然后将 text-align: center 添加到该空间的中心。

另请注意，我使用.formContainer > .matches 而不是.matches 来表示样式的特异性（.formContainer > div 中的grid-column 定义覆盖了.matches 中的grid-column，因为它是更具体） - 请参阅下面的演示：

.formContainer {
    display: grid;
    grid-template-columns: [labels] auto [data] auto 1fr;
    grid-auto-rows: auto;
    grid-row-gap: 5px;
    grid-column-gap: 10px; /* added */
    margin-top: 3%;
    margin-left: 12%;
    margin-right: 3%;
}
.formContainer > label {
    grid-column: labels;
}
.formContainer > div {
    grid-column: data;
}
/* changed below */
.formContainer > .matches{
    grid-column: span 2;
    text-align: center;
}

<div class='formContainer'>
  <label>
     <span>Name</span>
  </label>
  <div>
    <input type="text" />
  </div>
  <div class='matches'>
    <div>No matches yet!</div>
  </div>
</div>

【讨论】：