Question

我想在我的标题上设置一个底部边框，打破网格。左侧，中间和右侧有3列，我的标题和内容位于中间。我希望底部边框一直延伸到左列的左侧。有没有比我在下面提到的更好的方法呢？ CSS网格是否提供了内置机制来执行此类操作？我很感激任何建议。

.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

这是Michael_B上面的答案的修改。似乎工作相同，但没有添加标记到原始的HTML。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您的负边距方法似乎有效。它有点笨重，但似乎仍然有效。

您还可以使用绝对定位在标题下对齐该边框。容器将是边界框（即position: relative）。但这也有点笨拙。

如果您想要纯网格解决方案，那也是可能的。我想出的方法是干净有效的。有些人可能会认为它对于简单的边框来说太过分了，但是你的需求有点独特，所以这可能很有用。

这是基本概念：

将容器分成100行（1px）。
使您现有的网格项从上到下跨越这些行。
现在你回到了原来的布局，但是在引擎盖下进行了升级。
现在你有100个边界线。
创建一个新的网格项（DOM或伪元素）。
将项目跨越标题下的行。
瞧！： - ）

.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

另一种方法，基于与Micheael_B相同的想法，“你需要更多的行”。

您可以做的是将中间部分分成3部分。标题，边框，内容。您可以按顺序为每个网格行提供。

请参阅仅适用于Firefox的小提琴，因为我使用了显示属性contents而不是展开3个标签 https://jsfiddle.net/npddveag/2/

显示属性内容是使包装div消失而不会使实际标记消失的神奇方法。（并且继承的样式将应用，因此还有更多内容）。如果您需要它在其他浏览器中工作，您可以打开3个标签。

跨越更高级别的容器创建边框

3 个答案:

jsFiddle demo