Может ли ячейка сетки охватывать каждый столбец без указания количества столбцов? - PullRequest
Новая
       4

Может ли ячейка сетки охватывать каждый столбец без указания количества столбцов?

0 голосов
/ 23 января 2020

У меня есть сетка с динамически генерируемым количеством строк и столбцов. Ячейки размещаются индивидуально с grid-column-start.

У меня также есть сопутствующие заголовки, которые должны охватывать каждый столбец. Я ожидал бы grid-column-start: 1; grid-column-end: -1, чтобы произвести это поведение. Однако это происходит только в том случае, если количество столбцов указано заранее с помощью grid-template-columns.

. См. Следующую демонстрацию: 

.grid {
  display: grid;
  grid-gap: 5px;
}

.grid--three {
  grid-template-columns: auto auto auto;
}

.grid--auto {
  grid-auto-columns: auto;
}

.grid-heading {
  background: pink;
  grid-column-start: 1;
  grid-column-end: -1;
  padding: 5px;
}

.grid-cell {
  background: lightblue;
  padding: 5px;
}

.grid-cell--1 {
  grid-column-start: 1;
}

.grid-cell--2 {
  grid-column-start: 2;
}

.grid-cell--3 {
  grid-column-start: 3;
}
<h3>Three column grid</h3>

<div class="grid grid--three">
  <div class="grid-heading">
    My heading
  </div>
  <div class="grid-cell">
    one
  </div>
  <div class="grid-cell">
    two
  </div>
  <div class="grid-cell">
    three
  </div>
</div>

<h3>Any column grid</h3>

<div class="grid grid--auto">
  <div class="grid-heading">
    My heading
  </div>
  <div class="grid-cell grid-cell--1">
    one
  </div>
  <div class="grid-cell grid-cell--2">
    two
  </div>
  <div class="grid-cell grid-cell--3">
    three
  </div>
</div>

Возможно ли получить полное поведение охвата столбцов без указания количества столбцов?

Ответы [ 2 ]

1 голос
/ 23 января 2020

position:absolute может сделать это, но это остается хакерским способом, так как вам понадобится дополнительный элемент, чтобы взять первую ячейку и иметь ваш реальный элемент сверху, заполняя всю строку. Это может быть сложно, если это не первый ряд. 

.grid {
  display: grid;
  grid-gap: 5px;
  position:relative; /* Don't forget this */
}

.grid--three {
  grid-template-columns: auto auto auto;
}

.grid--auto {
  grid-auto-columns: auto;
}
/**/
.grid:before {
   content:"\80"; /* Zero width invisible character */
   padding:5px;
   grid-column: 1/-1;
}
.grid-heading {
  background: pink;
  position:absolute;
  top:0;
  left:0;
  right:0;
  padding: 5px;
}
/**/

.grid-cell {
  background: lightblue;
  padding: 5px;
}

.grid-cell--1 {
  grid-column-start: 1;
}

.grid-cell--2 {
  grid-column-start: 2;
}

.grid-cell--3 {
  grid-column-start: 3;
}
<h3>Three column grid</h3>

<div class="grid grid--three">
  <div class="grid-heading">
    My heading
  </div>
  <div class="grid-cell">
    one
  </div>
  <div class="grid-cell">
    two
  </div>
  <div class="grid-cell">
    three
  </div>
</div>

<h3>Any column grid</h3>

<div class="grid grid--auto">
  <div class="grid-heading">
    My heading
  </div>
  <div class="grid-cell grid-cell--1">
    one
  </div>
  <div class="grid-cell grid-cell--2">
    two
  </div>
  <div class="grid-cell grid-cell--3">
    three
  </div>
</div>
1 голос
/ 23 января 2020

К сожалению, нет. Это невозможно в текущей версии CSS Сетка ( Уровень 1 ).

Расширение области сетки по всем столбцам или строкам с использованием метода отрицательных целых чисел (1 / -1), вам понадобится явный контейнер сетки.

Из спецификации:

7.1 , Явная сетка

Нумерованные c индексы в свойствах размещения сетки отсчитываются от краев явной сетки.

Положительные индексы отсчитываются от начальной стороны (начиная с от 1 для самой явной строки начала), в то время как отрицательные индексы считаются со стороны конца (начиная с -1 для самой явной строки конца).

и здесь ...

8.3. Размещение на основе строки: свойства grid-row-start, grid-column-start, grid-row-end и grid-column-end

Если задано отрицательное целое число, вместо этого начинается обратный отсчет, начиная с конец ребра явной сетки.

...