Make a border span across higher-level containers - css

Question

I'd like to have a bottom border on my title that breaks the grid. There are 3 columns, left, middle, and right, and my title and content go in the middle. I'd like to have a bottom border extend all the way to the left side of the left column. Is there a better way to do this than what I came up with below? Does CSS grid provide a built-in mechanism for doing this sort of thing? I'd appreciate any suggestions.
.grid-container {
padding: 10px;
display: grid;
grid-template-columns: [start] 1fr [middle] 4fr [end] 1fr ;
grid-gap: 1rem;
background-color: #fff;
color: #444;
}
.start {
grid-column: start;
background-color: #ccc;
}
.middle {
grid-column: middle;
}
.title {
}
.title:after {
content: '';
display: block;
border-bottom: 1px solid red;
margin-left: calc(-25% - 1rem);
}
.end {
grid-column: end;
background-color: #ccc;
}
<div class="grid-container">
<div class="start">Start</div>
<div class="middle">
<h2 class="title">My Title</h2>
<div class="content">Some text lorem ipsum, whatever.</div>
</div>
<div class="end">End</div>
</div>

Answer 1

This is a modification of Michael_B's answer above. Seems to work the same but without the addition of markup to the original html.
.grid-container {
padding: 10px;
display: grid;
grid-template-columns: [start] 1fr [middle] 4fr [end] 1fr ;
grid-template-rows: repeat(100, 1px); /* new */
grid-column-gap: 1rem; /* adjusted; removed grid-row-gap */
background-color: #fff;
color: #444;
}
.start {
grid-column: start;
background-color: #ccc;
grid-row: 1 / -1; /* new */
}
.middle {
grid-column: middle;
grid-row: 1 / -1; /* new */
}
.end {
grid-column: end;
background-color: #ccc;
grid-row: 1 / -1; /* new */
}
.grid-container:after { /* new */
content: '';
background-color: red;
grid-row-start: 47;
grid-column: 1 / 3;
}
<div class="grid-container">
<div class="start">Start</div>
<div class="middle">
<h2 class="title">My Title</h2>
<div class="content">Some text lorem ipsum, whatever.</div>
</div>
<div class="end">End</div>
</div>

Answer 2

Your negative margin method seems to work. It's a bit clunky, but seems effective nonetheless.
You could also use absolute positioning to align that border under the title. The container would be the bounding box (i.e., position: relative). But that's also a bit clunky.
If you want a pure grid solution, that's also possible. The method I came up with is clean and effective. Some may consider it overkill for a simple border, but your need is somewhat unique, so this may be useful.
Here's the basic concept:
Divide your container into 100 tiny rows (1px).
Make your existing grid items span these rows from top to bottom.
Now you're back to your original layout, but with an upgrade under the hood.
You now have 100 places for a border line.
Create a new grid item (either DOM or pseudo-element).
Span the item across the row under your title.
Voilà! :-)
.grid-container {
padding: 10px;
display: grid;
grid-template-columns: [start] 1fr [middle] 4fr [end] 1fr ;
grid-template-rows: repeat(100, 1px); /* new */
grid-column-gap: 1rem; /* adjusted; removed grid-row-gap */
background-color: #fff;
color: #444;
}
.start {
grid-column: start;
background-color: #ccc;
grid-row: 1 / -1; /* new */
}
.middle {
grid-column: middle;
grid-row: 1 / -1; /* new */
}
.end {
grid-column: end;
background-color: #ccc;
grid-row: 1 / -1; /* new */
}
.grid-container::after { /* new */
content: "";
background-color: red;
grid-row-start: 47;
grid-column: 1 / 3;
}
<div class="grid-container">
<div class="start">Start</div>
<div class="middle">
<h2 class="title">My Title</h2>
<div class="content">Some text lorem ipsum, whatever.</div>
</div>
<div class="end">End</div>
<div class="border"></div>
</div>
jsFiddle demo

Answer 3

Another method, based on the same idea as Micheael_B had, "you need more rows".
What you can do is split the middle part in 3 parts. Title, border, content.
You can give each their own grid-row in order.
See fiddle that only works in Firefox because instead of unwrapping the 3 tags I used the display property contents
https://jsfiddle.net/npddveag/2/
The display property contents is a magic way of making the wrapper div disappear without the actual markup disappearing.(and inherited styles will stil apply, so there is a bit more to it).
If you need it to work in other browsers you can just unwrap the 3 tags.