如何使用 CSS 网格对齐嵌套 HTML 中的列

Question

我需要使用网格，但我的列不是网格的直接子级。网格有两列：

1. 第 1 列包含标签。
2. 第 2 列包含输入框。

标签列应与最大列一样大（但不大于）。输入列应使用所有剩余空间。我尝试了以下 CSS/HTML 组合。

* {
  border: 1px solid black;
  background: #2222;
}

.container {
  display: grid;
  width: 550px;
  grid-gap: 10px;
  grid-template-rows: [a] auto [b] auto [c] auto;
  grid-template-columns: [label] auto [input] 1fr;
  align-items: stretch;
}

label { grid-column-start: label; }
input { grid-column-start: input; }

.a { grid-row-start: a; }
.b { grid-row-start: b; }
.c { grid-row-start: c; }

<div class="container">
  <div class="a">
    <label>A</label>
    <input>
  </div>
  <div class="b">
    <label>Label B</label>
    <input>
  </div>
  <div class="c">
    <label>Longest C label</label>
    <input>
  </div>
</div>

我知道grid-column-start 没有被使用，因为元素不是网格的直接子元素。但是如何在不硬编码标签宽度或使用 Javascript 的情况下完成此功能？

使用多个网格（每行一个）会很好，但我需要同步第一列的宽度。我已经阅读了subgrids，但它还没有被任何主流浏览器实现。我还有其他方法可以解决这个问题吗？

Answer 1

如果the browser support 对你来说足够了，那么display: contents 可以从渲染中“排除”包装器元素，并且只显示它们的内容（类似于display: none，不会出现任何其他属性在父级上（如背景、边距、内边距等），但它会使子元素保持在游戏中）-> 子元素将使用父元素的网格布局引用来对齐自己。

* {
  border: 1px solid black;
  background: #2222;
}

.container {
  display: grid;
  width: 550px;
  grid-gap: 10px;
  grid-template-rows: [a] auto [b] auto [c] auto;
  grid-template-columns: [label] auto [input] 1fr;
  align-items: stretch;
}

label { grid-column-start: label; }
input { grid-column-start: input; }

.a { grid-row-start: a; display: contents; }
.b { grid-row-start: b; display: contents; }
.c { grid-row-start: c; display: contents; }

<div class="container">
  <div class="a">
    <label>A</label>
    <input>
  </div>
  <div class="b">
    <label>Label B</label>
    <input>
  </div>
  <div class="c">
    <label>Longest C label</label>
    <input>
  </div>
</div>

Answer 2

这似乎比 CSS 网格更适合表格布局：

* {
 box-sizing:border-box;
}
.container {
  display: table;
  width: 550px;
  border:1px solid;
}

.container>div {
  display: table-row;
}

label,
input {
  display: table-cell;
  border:1px solid green;
}
label {
  width:5%; /*a small value*/
  white-space:nowrap;
}
input {
 width:100%;
}

<div class="container">
  <div class="a">
    <label>A</label>
    <input>
  </div>
  <div class="b">
    <label>Label B</label>
    <input>
  </div>
  <div class="c">
    <label>Longest C label</label>
    <input>
  </div>
</div>