Зачем добавлять границу в сетку демонстрации детей ведет себя иначе, чем Flex показывает детей? ⇐ CSS

[Anonymous]

Использование следующего HTML Зачем добавлять пограничную ошибку детей. PrettyPrint-Override ">

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

.flex {
display: flex;
}

.flex-item {
flex: 1 0 0;
text-align: center;
}

.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
}

.grid-item {
}

.add-border :not(:last-of-type) {
border-right: 1px solid #000;
}


[h4]No Border[/h4]

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6


Item 1
Item 2
Item 3
Item 4
Item 5
Item 6


[h4]Border[/h4]

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6


Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
< /code>
< /div>
< /div>
< /p>
Добавление прозрачной границы в последнюю ячейку Решить проблему, но визуально он отбрасывает внешний вид. .Add-Border: Not (: последний тип) {граница правая: 1PX Solid Transparent; } 

рендеринг этого кода на последней версии Chrome (140.0.7339.81) и результатах Firefox (142.0.1) и Edge (139.0.3405.125). src = "https://i.sstatic.net/f5yayow6.png"/>

Подробнее здесь: https://stackoverflow.com/questions/797 ... ex-display