Угловой объект CSS Grid в нескольких столбцах - PullRequest
Новая
       7

Угловой объект CSS Grid в нескольких столбцах

0 голосов
/ 08 февраля 2019

Я пытаюсь сделать то, что я думал, было простой задачей, но не могу понять это, так что, возможно, это невозможно.

У меня есть объект, который я перебираю, и этот объектимеет два атрибута 

export class OptionLine {
  lineCode: number;
  lineDescription: String;
}

Я бы хотел, чтобы LineCode был столбцом 1, а LineDescription - столбцом 2

Моя последняя попытка выглядит так: 

<div class="config-options-box">
  <div *ngFor="let optionLine of optionLines">
     <div class="config-options-line-name">{{optionLine.lineCode}}</div>
     <div class="config-options-line-choices">{{optionLine.lineDescription}}</div>
  </div>
</div>

CSS:

.config-options-box { display: grid; grid-template-columns: 300px 600px; grid-gap: 10px; } .config-options-line-name { grid-column-start: 1; grid-row-end: span 1 } .config-options-line-choices { grid-column-start: 2; grid-row-end: span 1 }

Но это заканчивается тем, что элемент 1 имеет 2 строки в первой ячейке, элемент 2 имеет 2 строки во второй ячейке (строка 1, столбец 2) и т. Д.

Возможно ли это вообще?

1 Ответ

0 голосов
/ 10 февраля 2019

Понял, я мог бы отображать подсетку внутри каждого столбца основной сетки.Таким образом, основная сетка - это 1 ряд x 2 столбца, а затем каждый столбец имеет сетку, которая составляет n строк x 1 столбец.Возможно, это не самое эффективное решение, но у меня должно быть менее 20 наименований, поэтому я думаю, что все будет хорошо. 

<div class="config-options-box">
  <div class="config-options-names">
    <div *ngFor="let optionLine of optionLines">
      <div class="config-options-line-name">{{optionLine.lineCode}}</div>
    </div>
  </div>
  <div class="config-options-descriptions">
    <div *ngFor="let optionLine of optionLines">
      <div class="config-options-line-name">{{optionLine.lineDescription}}</div>
    </div>
  </div>
</div>


.config-options-box {
  display: grid;
  grid-template-columns: 300px 600px;
  grid-gap: 10px;
}

.config-options-subgrid {
  display: grid;
  grid-template-columns: auto;
  grid-gap: 10px;
}
...