CSS 网格列周围的框阴影

Question

我目前有一个 CSS 网格，其中的行数是动态的，其中的行子集应该组合在一起。我想用投影将这些组的第一列包裹起来，但我不知道该怎么做。我可以用边框完成我想要的，因为我可以去掉中间元素的顶部和底部边框。

有没有办法在有或没有网格布局的情况下做到这一点？

.grid {
  display: grid;
  grid-template-columns: 250px 250px 250px;
  grid-column-gap: 20px;
}

.top,
.middle,
.bottom {
  border: 2px solid black;
}

.top {
  border-bottom: none;
}

.middle {
  border-top: none;
  border-bottom: none;
}

.bottom {
  border-top: none;
}

.title {
  text-align: center;
  
  padding: 5px 20px;
}

.title span {
  margin: 0 20px;
}

.title,
.details,
.actions {
  text-align: center;
  vertical-align: middle;
  margin: auto 0;
}

<div class="grid">
  <span class="top title">
    <span>row 1 title</span>
  </span>
  <span class="details">row 1 details</span>
  <span class="actions">row 1 actions</span>
    
  <span class="middle title">
    <span>row 2 title</span>
  </span>
  <span class="details">row 2 details</span>
  <span class="actions">row 2 actions</span>
    
  <span class="middle title">
    <span>row 3 has an extra long tile that wraps around</span>
  </span>
  <div class="details">row 3 details</div>
  <span class="actions">row 3 actions</span>
    
  <span class="bottom title">
    <span>row 4 title</span>
  </span>
  <span class="details">row 4 details</span>
  <span class="actions">row 4 actions</span>
  
  <span class="top title">
    <span>row 5 title</span>
  </span>
  <span class="details">row 5 details</span>
  <span class="actions">row 5 actions</span>
  
  <span class="bottom title">
    <span>row 6 title</span>
  </span>
  <span class="details">row 6 details</span>
  <span class="actions">row 6 actions</span>
</div>

Answer 1

无法将样式应用于特定列或行中的所有 网格项 或为此对它们进行分组。您已经在做直接定位元素的可能选项。

Hacky 解决方案

在这里，我将使用您正在使用 top、middle 和 bottom 类以及 box shadow[= 的创建和效果这一事实48=]:

用一个方便 box-shadow把一个伪元素放在后面第一列中的网格项目，

在网格项上使用background来匹配列，从而隐藏行与行之间的阴影，

现在使用 margin 在 bottom class 处分隔。

.grid { display: grid; grid-template-columns: 250px 250px 250px; grid-column-gap: 20px; } .top:after, .middle:after, .bottom:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; box-shadow: 0 0px 10px 2px #ddd; background: #fff; } .title.bottom { margin-bottom: 15px; background: transparent; } .title { text-align: center; position: relative; padding: 5px 20px; background: #fff; } .title span { margin: 0 20px; } .title, .details, .actions { text-align: center; vertical-align: middle; margin: auto 0; }

<div class="grid"> row 1 title row 1 details row 1 actions row 2 title row 2 details row 2 actions row 3 has an extra long tile that wraps around <div class="details">row 3 details</div> row 3 actions row 4 title row 4 details row 4 actions row 5 title row 5 details row 5 actions row 6 title row 6 details row 6 actions </div>

CSS 网格列周围的框阴影

Box shadow around column of CSS grid

html

css

css-grid

box-shadow

Hacky 解决方案