html - CSS 网格布局 : specify grid position with less typing?

Question

(我正在尝试使用 CSS 网格布局将此数据输入页面从非常原始的 CSS/HTML“表格”布局转换为更好的布局)。

按照惯例，我似乎将其设置为 12 列宽。每个输入字段都有一个标签，宽度相同。换句话说，我的 CSS 目前非常重复:

.container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-gap: 10px;
}

#SigNameLabel {
  grid-column: 1 / 13;
  grid-row: 2;
}

#SignatureName {
  grid-column: 5 / 13;
  grid-row: 2;
}

#PaymentNoLabel {
  grid-column: 1 / 13;
  grid-row: 3;
}

#PaymentNo {
  grid-column: 5 / 13;
  grid-row: 3;
}

#CurrencyLabel {
  grid-column: 1 / 13;
  grid-row: 4;
}

#Currency {
  grid-column: 5 / 13;
  grid-row: 4;
}

* {
  border: 1px solid #999;
}        

<div class="container">
  <div id='SigNameLabel' class='unselectable'>Signature name:</div>
  <div id='SignatureName' class='unselectable dataField single-line'></div>

  <div id='PaymentNoLabel' class='unselectable'>Payment No:</div>
  <div id='PaymentNo' class='unselectable dataField single-line'></div>

  <div id='CurrencyLabel' class='unselectable'>Currency:</div>
  <div id='Currency' class='dataField single-line'></div>
</div>

如果不使用 JS 以自动化方式“创建”布局，即通过分析 container 中的 DIV，是否有任何方法可以使 CSS 不那么繁琐和明确的，更只是“带头” HTML 做什么？

例如，我不得不为这里的每个标签提供一个特定的 ID:当他们每个人都坐在自己的 TD 中时，他们不需要那个。有什么办法可以给每个这样的标签 DIV 一个类，比如 left-hand-column，并且它们都可以有 grid-column: 1/13 应用于它们，不知何故 grid-row 与它们右侧的数据字段 DIV 相同？

Answer 1

您可以像下面这样简化您的代码。而且你不一定需要 12 列

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
}

.container>*:nth-child(even) {
  grid-column: span 2;
  border:1px solid;
}
.container>*:nth-child(odd) {
  /* Not sure if you need this but it will allow 
     the full width of the grid like your code grid-column: 1 / 13;
  width:calc(300% + 2*10px); */
  border:1px solid red;
}

<div class="container">
  <div id='SigNameLabel' class='unselectable'>Signature name:</div>
  <div id='SignatureName' class='unselectable dataField single-line'></div>

  <div id='PaymentNoLabel' class='unselectable'>Payment No:</div>
  <div id='PaymentNo' class='unselectable dataField single-line'></div>

  <div id='CurrencyLabel' class='unselectable'>Currency:</div>
  <div id='Currency' class='dataField single-line'></div>
</div>