Я хочу иметь адаптивную сетку элементов переменной длины. Сетка должна заполнять доступную ширину содержащего элемента, причем количество столбцов зависит от ширины контейнера. Это легко сделать с помощью CSS-сеток; однако я не знаю, как добавить вертикальную границу между столбцами (т. е. только во внутренних зазорах столбцов). Приведенная ниже простая демонстрационная программа позволяет получить вертикальную границу в случае трех столбцов:
https://codepen.io/yowzadave/pen/OYPvLd?editors=1100
html, body {
box-sizing: border-box
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
grid-column-gap: 0.5rem;
}
.item {
border-right: 1px solid black;
padding-right: 0.5rem;
}
.item:nth-child(3n) {
border-right: none;
padding-right: 0;
}
.box {
background-color: pink;
height: 2rem;
margin: 0.5rem;
}
<html>
<body>
<div class="container">
<div class="item"><div class="box"></div></div>
<div class="item"><div class="box"></div></div>
<div class="item"><div class="box"></div></div>
<div class="item"><div class="box"></div></div>
<div class="item"><div class="box"></div></div>
<div class="item"><div class="box"></div></div>
</div>
</body>
</html>
... но в случае, если браузер шире или уже, границы будут смещены. Есть ли способ правильно разместить границы при любой ширине браузера?