Почему дополнительная линия столбца создается в сетке CSS? ⇐ Html

[Anonymous]

Я работаю с CSS GRID, и я заметил поведение, которое я не полностью понимаю.

Код: Выделить всё

body {
background: rgb(58, 58, 59);
}

.grid-parent {
height: 90vh;
display: grid;
gap: 5px;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr 2fr 4fr;
}

.grid-parent>* {
background-color: rgb(102, 102, 102);
}

.clildren-a {
grid-row: 1 / 4;
grid-column: 1 / 2;
}

.clildren-b {
grid-row: 1 / 2;
grid-column: 2 / 4;
}

.clildren-c {
grid-row: 1 / 4;
grid-column: 4 / 5;
}

.clildren-d {
grid-row: 2 / 4;
grid-column: 2 / 3;
}

.clildren-e {
grid-row: 2 / 4;
grid-column: 3 / 4;
}

.clildren-f {
grid-row: 1 / 4;
width: 90px;
}< /code>


A
B
C
D
E

f

Даже если я определил сетку-сигнальные колонны: повторить (4, 1FR); (4 столбца), я замечаю, что брейдзер создает 6 линейков сетки столбцов вместо 5, кажущиеся, для размещения. Создано?>

Подробнее здесь: https://stackoverflow.com/questions/797 ... n-css-grid