(Я пытаюсь преобразовать эту страницу ввода данных из очень примитивного CSS / HTML-макета «таблицы» во что-то немного лучше, используя CSS Grid layout).

Похоже, что в соответствии с обычной практикой я сделал ширину в 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 для «создания» макета в автоматическом режиме, то есть путем анализа DIVs в контейнере , есть ли способ сделать CSS менее громоздким и явным, больше просто "взять на себя инициативу", что делает HTML?

Например, я должен был дать конкретный идентификатор каждой из меток здесь: когда каждый из них сидел в своем собственном TD , это им не нужно. Есть ли способ, которым каждому такому ярлыку DIV может быть присвоен класс, скажем, left-column-, и каким-то образом они все могут иметь grid-column: 1 / 13 применяется к ним и как-то так же grid-row , что и поле данных DIV справа от них?

0
mike rodent

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