Граница между каждой колонкой в ​​сетке CSS ⇐ Html

[Anonymous]

Я пытаюсь добавить границы между каждыми столбцами в сетке в CSS. Тем не менее, внутри моего Div обертки, Divs, которые я не содержал такого же контента, поэтому, когда я пытаюсь установить границу и оставить на моем Div, а затем правом границы и дна на моих внутренних dips , границы не той же высоты. Я просто хочу знать, что когда я занимаюсь сетчатыми колоннами: 1FR 1FR 1FR; Как я могу установить границу-правое для каждой фракции. < /p>
Вот мой код: < /p>



{{ collection.products_count }} products



{% if collection.all_tags.size > 0 %}
Filter by

• {% for tag in collection.all_tags %}
  {% unless tag contains "_"%}
  {% if current_tags contains tag %}
• {{ tag | link_to_remove_tag: tag }}
  {% else %}
• {{ tag | link_to_add_tag: tag }}
  {% endif %}
  {% endunless %}
  {% endfor %}

{% endif %}



Sort by


{% assign sort_by = collection.sort_by | default: collection.default_sort_by %}
{% for option in collection.sort_options %}

{{ option.name }}

{% endfor %}




< /code>
Вот CSS: < /p>
.sort-count-filter {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
margin-top: 3%;
font-family: "Open Sans";
justify-content: center;
align-items: center;
border-top: 1px solid black;
border-left: 1px solid black;
}
.sort-count-filter > div {
border-bottom: 1px solid black;
border-right: 1px solid black;
}


Подробнее здесь: https://stackoverflow.com/questions/725 ... rid-layout