Вы указываете все элементы red в пятой строке, используя grid-row-start: 5. Да, красные элементы помещены в пятую строку, и это не сразу видно, поскольку вы не указали явное определение строки (скажем, с использованием grid-template-rows).
Скрытые строки
Вы можете определить определение неявной строки , используя что-то вроде grid-auto-rows: 50px и увидеть, что элемент red фактически находится в пятой строке:
ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: 50px; /* specify row height */
list-style: none; /* remove bullets */
padding: 0; /* remove default ul padding */
}
.blue {
background-color: blue;
}
.red {
background-color: red;
grid-row-start: 5;
}
li {
border: 1px solid #bbb; /* border for illustration */
}
<ul>
<li class="blue">
<h2>1</h2>
</li>
<li class="red">
<h2>2</h2>
</li>
<li class="blue">
<h2>3</h2>
</li>
<li class="blue">
<h2>4</h2>
</li>
<li class="red">
<h2>5</h2>
</li>
<li class="red">
<h2>6</h2>
</li>
<!-- If you delete this (or any other "red") "li" element then it's working fine -->
<li class="red">
<h2>7</h2>
</li>
<li class="blue">
<h2>8</h2>
</li>
</ul>
Скрытые столбцы
Теперь ваш вопрос: почему четвертый красный предмет находится в одном ряду - потому что вы поместили всех в один и тот же пятый ряд. столбец неявной сетки создается с автоматической шириной - вы можете управлять этой шириной, используя grid-auto-columns:
ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: 50px; /* specify row height */
grid-auto-columns: 100px; /* specify column width */
list-style: none; /* remove bullets */
padding: 0; /* remove default ul padding */
}
.blue {
background-color: blue;
}
.red {
background-color: red;
grid-row-start: 5;
}
li {
border: 1px solid #bbb; /* border for illustration */
}
<ul>
<li class="blue">
<h2>1</h2>
</li>
<li class="red">
<h2>2</h2>
</li>
<li class="blue">
<h2>3</h2>
</li>
<li class="blue">
<h2>4</h2>
</li>
<li class="red">
<h2>5</h2>
</li>
<li class="red">
<h2>6</h2>
</li>
<!-- If you delete this (or any other "red") "li" element then it's working fine -->
<li class="red">
<h2>7</h2>
</li>
<li class="blue">
<h2>8</h2>
</li>
</ul>
Решение
Вы можете сделать это для группы их:
установите order: 1 на красные элементы, чтобы они всегда следовали за синими ,
установите первый элемент red в первый столбец, используя grid-column: 1, а остальные будут автоматически размещены, используя grid-column: auto.
См. Демо ниже:
ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
list-style: none; /* remove bullets */
padding: 0; /* remove default ul padding */
}
.blue {
background-color: blue;
}
.red {
background-color: red;
order: 1; /* red items have higher order */
}
.red { /* first red element into first column */
grid-column: 1;
}
.red ~ .red { /* subsequent red elements auto-placed */
grid-column: auto;
}
li {
border: 1px solid #bbb; /* border for illustration */
}
<ul>
<li class="blue">
<h2>1</h2>
</li>
<li class="red">
<h2>2</h2>
</li>
<li class="blue">
<h2>3</h2>
</li>
<li class="blue">
<h2>4</h2>
</li>
<li class="red">
<h2>5</h2>
</li>
<li class="red">
<h2>6</h2>
</li>
<!-- If you delete this (or any other "red") "li" element then it's working fine -->
<li class="red">
<h2>7</h2>
</li>
<li class="blue">
<h2>8</h2>
</li>
</ul>
Явная или неявная сетка
Явная сетка
Явная сетка - это сетка, которую вы определяете с помощью grid-template-columns, grid-template-rows, grid-template-areas и связанных сокращенных свойств - см. Выдержки из W3C ниже:
Explicit Grid (W3C)
Три свойства grid-template-columns, grid-template-columns и
области-шаблона-сетки вместе определяют явную сетку сетки
контейнер. Окончательная сетка может оказаться больше из-за размещения элементов сетки
вне явной сетки; в этом случае неявные треки будут
созданные, эти неявные дорожки будут измеряться сеткой-авто-строк и
свойства grid-auto-столбцов.
См. Пример ниже и явная сетка 2x2, к которой мы вскоре вернемся:
.wrapper {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 50px 50px;
grid-gap: 5px;
}
/* styles */
.wrapper > div { border: 1px solid cadetblue; background: lightblue; display: flex; justify-content: center; align-items: center;}
<div class="wrapper">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
Скрытая сетка
Если у вас есть больше контента или элементов внутри контейнера сетки, но снаружи явного определения сетки , тогда , который является частью то, что называется неявной сеткой .
Вы управляете размером неявной сетки , используя свойства grid-auto-rows и grid-auto-columns.
Implicit Grid (W3C)
grid-template-rows, grid-template-columns и grid-template-areas
свойства определяют фиксированное количество треков, которые формируют явное
сетка. Когда элементы сетки расположены за пределами этих границ, сетка
Контейнер генерирует неявные дорожки сетки, добавляя неявные линии сетки
к сетке. Эти линии вместе с явной сеткой образуют
неявная сетка. Свойства grid-auto-rows и grid-auto-columns
размер этих неявных дорожек сетки.
Вы можете увидеть неявных строк , созданных, если у вас больше элементов сетки в приведенном выше примере - размер этих строк можно определить с помощью свойства grid-auto-rows:
.wrapper {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 50px 50px;
grid-gap: 5px;
grid-auto-rows: 25px; /* size of implicit rows */
}
/* styles */
.wrapper > div { border: 1px solid cadetblue; background: lightblue; display: flex; justify-content: center; align-items: center;}
<div class="wrapper">
<div>1</div><div>2</div><div>3</div><div>4</div>
<div>5</div><div>6</div><div>7</div><div>8</div>
</div>
Чтобы посмотреть на неявные столбцы , созданные, вы можете попробовать поместить некоторые элементы сетки за пределы второго столбца - эти строки можно определить с помощью свойства grid-auto-columns. Посмотрите, как создается новый столбец и как ведет себя сетка:
.wrapper {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 50px 50px;
grid-gap: 5px;
grid-auto-rows: 25px; /* size of implicit rows */
grid-auto-columns: 25px; /* size of implicit columns */
}
div:nth-child(5), div:nth-child(6) {
grid-column: 3; /* place in thrid column */
}
/* styles */
.wrapper > div { border: 1px solid cadetblue; background: lightblue; display: flex; justify-content: center; align-items: center;}
<div class="wrapper">
<div>1</div><div>2</div><div>3</div><div>4</div>
<div>5</div><div>6</div><div>7</div><div>8</div>
</div>