Grenze zwischen jeder Säule in CSS Grid Layout ⇐ HTML

[Guest]

Ich versuche, Grenzen zwischen den einzelnen Spalten in einem Gitterlayout in CSS hinzuzufügen. In meiner Wrapper Div enthalten die Divs, die ich habe, jedoch nicht den gleichen Inhalt. Wenn ich also versuche, einen Randtop zu setzen und auf meiner Wrapper Div und dann auf einen Grenzrecht und unten auf meinen Inside Divs zu bleiben Die Grenzen sind nicht von der gleichen Höhe. Ich möchte das nur wissen, wenn ich Grid-Template-Säulen mache: 1fr 1fr 1fr; Wie kann ich für jede Fraktion eine Grenzrechts einstellen. < /p>
Hier ist mein Code: < /p>

Code: Select all

{{ collection.products_count }} products



{% if collection.all_tags.size > 0 %}
Filter by
[list]
{% 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 %}
[/list]
{% endif %}



Sort by


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

{{ option.name }}

{% endfor %}




< /code>
Hier ist das 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;
}