Динамические строки с использованием CSS Grid - PullRequest
Новая
       34

Динамические строки с использованием CSS Grid

2 голосов
/ 06 апреля 2019

Я использую Grid для представления некоторых данных. Я хотел бы иметь макет, где первая строка - заголовки, вторая строка - подзаголовки, а третья - основной контент. Это довольно просто сделать, используя свойство grid-template-areas для grid-container. Моя проблема в том, что я хотел бы, чтобы первая строка генерировалась только один раз, тогда как вторая и третья строки должны быть динамическими.

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

Мой CSS grid container определен следующим образом: 

.grid-container {
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: auto;
      grid-template-areas:
         "header1 header2 header3"
         "subheader1 . subheader2";
}

.header-item-1 {
     grid-area: header1;
}

.header-item-2 {
     grid-area: header2;
}

.header-item-3 {
     grid-area: header3;
}

.sub-header-item-1 {
     grid-area: subheader1;
}

.sub-header-item-2 {
     grid-area: subheader2;
}

Мой HTML-код выглядит следующим образом: 

<ul class="grid-container">
    <li class="header-item-1">header1</li>
    <li class="header-item-2">header2</li>
    <li class="header-item-3">header3</li>

<!-- ko foreach: { data: subheaderItem, as: 'subheader' } -->

    <li class="sub-header-item-1" data-bind="text: subheader.name"></li>
    <li class="sub-header-item-2" data-bind="text: subheader.type></li>

<!-- /ko -->
</ul>

В результате получается макет, в котором первая строка правильная, вторая строка имеет правильную компоновку, но все итерации подзаголовков размещаются в одних и тех же ячейках, например: 

 *        *       *
***              ***

Что мне нужно, это: 

 *        *       *
 *                *
 *                *
 *                *
....

Буду признателен за любые советы о том, как это сделать;)

1 Ответ

2 голосов
/ 06 апреля 2019

Вы можете удалить grid-template-areas (те же области сетки будут перекрываться - см. Еще example here) и использовать макет с 3 столбцами, используя grid-template-columns: repeat(3, 1fr), а затем настройку grid-column: 1 для sub-header-item-1 и grid-column: 3 для sub-header-item-2.

См. Демо ниже: 

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
}

.sub-header-item-1 {
  grid-column: 1;
}

.sub-header-item-2 {
  grid-column: 3;
}
<ul class="grid-container">
  <li class="header-item-1">header1</li>
  <li class="header-item-2">header2</li>
  <li class="header-item-3">header3</li>
  <li class="sub-header-item-1">1</li>
  <li class="sub-header-item-2">3</li>
  <li class="sub-header-item-1">1</li>
  <li class="sub-header-item-2">3</li>
  <li class="sub-header-item-1">1</li>
  <li class="sub-header-item-2">3</li>
</ul>
...