it-swarm.com.ru

Сделать интервал элемента сетки до последней строки/столбца

Можно ли сделать интервал элемента сетки от первой до последней строки, если я не знаю количество строк?

Допустим, у меня есть следующий HTML с неизвестным количеством ящиков.

Как я могу сделать третий .box пролет от первой линии сетки до последней? 

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
  grid-template-rows: auto [last-line];
}

.box {
  background-color: blue;
  padding: 20px;
  border: 1px solid red;
}

.box:nth-child(3) {
  background-color: yellow;
  grid-column: last-col / span 1;
  grid-row: 1 / last-line;
}
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box">3</div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

20
jbe

Вы можете добавить grid-row-start к этим полям css, и установить его так, чтобы он занимал абсурдно большое число.

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%; 
  grid-template-rows: auto [last-line];
}

.box {
  background-color: blue;
  padding: 20px;
  border: 1px solid red;
}

.box:nth-child(3) {
  background-color: yellow;
  grid-column: last-col / span 1;
  grid-row: 1 / last-line;
  grid-row-start: span 9000;
}
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box">3</div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Правка - Отказ от ответственности:

Это неоптимальное решение и работает не во всех браузерах, будьте осторожны! Хотя это может показаться работающим в некоторых браузерах (Chrome), другие браузеры (Firefox) создадут абсурдное количество строк, что вызывает проблемы.

11
Hodrobond

Можно ли сделать интервал элемента сетки от первой до последней строки, если я не знаю количество строк?

Естественное решение этой проблемы в Grid, по-видимому, отсутствует в текущей спецификации (Уровень 1). Таким образом, ответ будет «нет», строго со свойствами Grid.

Однако, как указано в этот ответ , это возможно при абсолютном позиционировании.


Хотя CSS Grid не может сделать область сетки охватывающей все столбцы/строки в неявная сетка, она может выполнять работу в явная сетка.

Используйте отрицательные целые числа.

Вот два интересных раздела в спецификации CSS Grid:

7.1. Явная Сетка

Числовые индексы в свойствах размещения сетки отсчитываются от краев явной сетки. Положительные индексы отсчитываются со стороны старта, в то время как отрицательные индексы отсчитываются с конца.

и здесь...

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

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

Другими словами, при работе с явной сеткой, которая является сеткой, которую вы определяете, используя эти свойства:

  • grid-template-rows
  • grid-template-columns
  • grid-template-areas

... вы можете сделать область сетки охватывающей все столбцы, установив это правило:

grid-column: 3 / -1;

Это говорит о том, что область сетки должна проходить от третьей строки столбца до последней строки столбца.

Обратное будет:

grid-column: 1 / -3;

Опять же, этот метод работает только в явных сетках. 

7
Michael_B

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

.grid {
  display: grid;
  grid-template: auto / auto 22px auto;
  position: relative;
}

.vline {
  position: absolute;
  height: 100%;
  width: 2px;
  background-color: black;
  grid-column: 2 / span 1;
  margin: 0 10px;
}

.grid h1:nth-child(1) { grid-row: 1; grid-column: 1; text-align: right; }
.grid p:nth-child(2) { grid-row: 2; grid-column: 1; text-align: right; }
.grid h1:nth-child(3) { grid-row: 3; grid-column: 3; }
.grid p:nth-child(4) { grid-row: 4; grid-column: 3; }
.grid h1:nth-child(5) { grid-row: 5; grid-column: 1; text-align: right; }
.grid p:nth-child(6) { grid-row: 6; grid-column: 1; text-align: right; }
.grid h1:nth-child(7) { grid-row: 7; grid-column: 3; }
.grid p:nth-child(8) { grid-row: 8; grid-column: 3; }
p, h1 { margin: 0; padding: 0; }
<div class="grid">
  <h1>1.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
  <h1>2.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <h1>3.</h1>
  <p>In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
  <h1>4.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
  <div class="vline"></div>
</div>

2
Fanus du Toit

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

Используйте JavaScript, чтобы вынуть третье поле и поместить его помимо исходного контейнера сетки, если вы не можете сделать это заранее. 

.container {
    display: grid;
    grid-template-columns: 65% 35%;
}

.nested_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    grid-template-rows: auto;
}

.box {
    background-color: blue;
    padding-bottom: 20px;
    border: 1px solid red;
}

.side {
    background-color: yellow;
    grid-column: 1 -1;
    border: 1px solid red;
}
<div class="container">
    <div class="nested_grid">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <div class="side">3</div>
</div>
<p><a href="gridbyexample.com">gridbyexample.com</a></p>

0
Duck