CSS selectors for inner grid lines with variable items - html

Question

I have a list view of data displayed as cards and I'm trying to get to a pure CSS solution where I'll have only inner border lines.
The cards will display a max of two per row and will wrap to the next line when there are more. We're using bootstrap col-md-6 to achieve this.
Here's an example of three data items displayed as cards and what I'm trying to achieve with the inner grid lines.
Notes:
If there are only two items then the bottom line shouldn't be visible
I thought I could use adapt the technique mentioned here by Lea Verou, but I haven't been able to get it to work.
Regardless of how many items there are none of the outer borders should ever show. This is especially so with the last 1 or two items depending on the total count of items
Here's an example of the HTML markup for an individual list item:
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Name</label>
<div class="form-control-static">Fund</div>
</div>
<div class="form-group">
<label class="control-label">Tax Rate</label>
<div class="form-control-static">1</div>
</div>
<div class="form-group">
<label class="control-label">Amount</label>
<div class="form-control-static">10</div>
</div>
<div class="edit-buttons">
<a class="btn btn-link"><span class="glyphicon glyphicon-pencil"></span> edit</a>
<a class="btn btn-link><span class="glyphicon glyphicon-remove"></span> delete</a>
</div>
</div>
I know to get the middle line I can use:
.col-md-6:nth-child(odd){
border-right:1px solid gray;
}
The problem comes in with the bottom border, i.e. if you have a total of three data items then only the last one should have its bottom border set to 'none'. If there are four then the last two would need their bottom borders set to 'none'.
What's the best approach to getting this to work without the use of tables?

Answer 1

In other words, the last item should have always border: none.
And the before-the last item, only when it's odd.
I will skip the style to make the grid, since this is not really relevant
Let's begin setting border to all but the last 2:
div {
display: inline-block;
}
.container {
border: solid 1px black;
}
.container div {
width: 50px;
height: 50px;
margin: 5px;
background-color: lightblue;
}
.container div:nth-last-child(n + 3) {
border-bottom: solid 4px green;
}
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
And now the before-the-lasty, if even
div {
display: inline-block;
}
.container {
border: solid 1px black;
}
.container div {
width: 50px;
height: 50px;
margin: 5px;
background-color: lightblue;
}
.container div:nth-last-child(2):nth-child(even) {
border-bottom: solid 4px red;
}
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
So, the end result:
div {
display: inline-block;
}
.container {
border: solid 1px black;
width: 130px;
vertical-align: top;
}
.container div {
width: 50px;
height: 50px;
margin: 5px;
background-color: lightblue;
}
.container div:nth-last-child(n + 3),
.container div:nth-last-child(2):nth-child(even) {
border-bottom: solid 4px blue;
}
<div class="container">
<div></div>
<div></div>
</div>
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

Answer 2

you could wrap each 2 cols inside a row. and give border-bottom to that row instead of the cols
see below
.col-md-6:first-child { border-right:1px solid gray}
.row:not(:last-child) { border-bottom:1px solid gray}
.container-fluid { margin:15px auto;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-xs-6 col-sm-6">
<div class="form-group">
<label class="control-label">Name</label>
<div class="form-control-static">Fund</div>
</div>
<div class="form-group">
<label class="control-label">Tax Rate</label>
<div class="form-control-static">1</div>
</div>
<div class="form-group">
<label class="control-label">Amount</label>
<div class="form-control-static">10</div>
</div>
<div class="edit-buttons">
<a class="btn btn-link"><span class="glyphicon glyphicon-pencil"></span> edit</a>
<a class="btn btn-link"><span class="glyphicon glyphicon-remove"></span> delete</a>
</div>
</div>
<div class="col-md-6 col-xs-6 col-sm-6">
<div class="form-group">
<label class="control-label">Name</label>
<div class="form-control-static">Fund</div>
</div>
<div class="form-group">
<label class="control-label">Tax Rate</label>
<div class="form-control-static">1</div>
</div>
<div class="form-group">
<label class="control-label">Amount</label>
<div class="form-control-static">10</div>
</div>
<div class="edit-buttons">
<a class="btn btn-link"><span class="glyphicon glyphicon-pencil"></span> edit</a>
<a class="btn btn-link"><span class="glyphicon glyphicon-remove"></span> delete</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-6 col-sm-6">
<div class="form-group">
<label class="control-label">Name</label>
<div class="form-control-static">Fund</div>
</div>
<div class="form-group">
<label class="control-label">Tax Rate</label>
<div class="form-control-static">1</div>
</div>
<div class="form-group">
<label class="control-label">Amount</label>
<div class="form-control-static">10</div>
</div>
<div class="edit-buttons">
<a class="btn btn-link"><span class="glyphicon glyphicon-pencil"></span> edit</a>
<a class="btn btn-link"><span class="glyphicon glyphicon-remove"></span> delete</a>
</div>
</div>
<div class="col-md-6 col-xs-6 col-sm-6">
<div class="form-group">
<label class="control-label">Name</label>
<div class="form-control-static">Fund</div>
</div>
<div class="form-group">
<label class="control-label">Tax Rate</label>
<div class="form-control-static">1</div>
</div>
<div class="form-group">
<label class="control-label">Amount</label>
<div class="form-control-static">10</div>
</div>
<div class="edit-buttons">
<a class="btn btn-link"><span class="glyphicon glyphicon-pencil"></span> edit</a>
<a class="btn btn-link"><span class="glyphicon glyphicon-remove"></span> delete</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-6 col-sm-6">
<div class="form-group">
<label class="control-label">Name</label>
<div class="form-control-static">Fund</div>
</div>
<div class="form-group">
<label class="control-label">Tax Rate</label>
<div class="form-control-static">1</div>
</div>
<div class="form-group">
<label class="control-label">Amount</label>
<div class="form-control-static">10</div>
</div>
<div class="edit-buttons">
<a class="btn btn-link"><span class="glyphicon glyphicon-pencil"></span> edit</a>
<a class="btn btn-link"><span class="glyphicon glyphicon-remove"></span> delete</a>
</div>
</div>
</div>
</div>

Answer 3

Put a common class in every card. Here I assumed it as card
.card:nth-child(odd){
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.card:nth-child(even){
border-bottom: 1px solid #ddd;
}