CSS网格布局中每列之间的边框

Question

我试图在CSS中的网格布局中添加每个列之间的边界。然而，在我的包装器div中，div不包含相同的内容，所以当我试图在包装器div上设置border-top和left然后在我的内部div上设置border-right和bottom时，边界的高度不相同。我只是想知道当我做grid-template-columns时:1fr 1fr 1fr;如何为每个分数设置右边框?

下面是我的代码:

<div class="sort-count-filter">

<div class="product-count">
<p>{{ collection.products_count }} products</p>
</div>
<!-- collections filter by tag -->
<div class="filter-by">
{% if collection.all_tags.size > 0 %}
<p>Filter by</p>
<ul class="tag-filters">
{% for tag in collection.all_tags %}
{% unless tag contains "_"%}
{% if current_tags contains tag %}
<li class="tag-filters__item"><p class="filters">{{ tag | link_to_remove_tag: tag }}</p></li>
{% else %}
<li class="tag-filters__item"><p class="filters">{{ tag | link_to_add_tag: tag }}</p></li>
{% endif %}
{% endunless %}
{% endfor %}
</ul>
{% endif %}
</div>
<!-- collection sort -->
<div class="sort-by">
<span>Sort by</span>
<span>
<select id="sort-by">
{% assign sort_by = collection.sort_by | default: collection.default_sort_by %}
{% for option in collection.sort_options %}
<option value="{{ option.value }}" {% if option.value == sort_by %}selected="selected"{% endif %}>
{{ option.name }}
</option>
{% endfor %}
</select>
</span>
</div> 
</div>

CSS:

.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;
}

Answer 1

也许你想要align-items: stretch?

这个页面是格式化网格的一个很好的参考。

.sort-count-filter {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
font-family: "Open Sans";
justify-content: center;
align-items: stretch;
border-top: 1px solid black;
border-left: 1px solid black;
}
.sort-count-filter > div {
border-bottom: 1px solid black;
border-right: 1px solid black;
padding: 0 1em;
}

<div class="sort-count-filter">

<div class="product-count">
<p>99 products</p>
</div>
<div class="filter-by">
<p>Filter by</p>
<ul class="tag-filters">
<li class="tag-filters__item"><p class="filters">One</p></li>
<li class="tag-filters__item"><p class="filters">Two</p></li>
<li class="tag-filters__item"><p class="filters">Three</p></li>
<li class="tag-filters__item"><p class="filters">Four</p></li>
<li class="tag-filters__item"><p class="filters">Five</p></li>
<li class="tag-filters__item"><p class="filters">Six</p></li>
<li class="tag-filters__item"><p class="filters">Seven</p></li>
</ul>
</div>
<div class="sort-by">
<p>Sort by
<select id="sort-by">
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
</select>
</p>
</div> 
</div>