CSS Grid layout: указать положение сетки с меньшим набором текста? - PullRequest
Новая
       39

CSS Grid layout: указать положение сетки с меньшим набором текста?

0 голосов
/ 28 октября 2019

(я пытаюсь преобразовать эту страницу ввода данных из очень примитивного 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 в container, есть ли способсделать CSS менее громоздким и понятным, а просто «взять на себя инициативу» из того, что делает HTML?

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

1 Ответ

1 голос
/ 28 октября 2019

Вы можете упростить свой код, как показано ниже. И вам не обязательно нужны 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>
...