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

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

---

棘手的解决方案

在这里，我将使用一个事实，即您使用top，middle和bottom的句法以及盒子阴影的创建和效果：< / p>

• 使用便捷 box-shadow到位于第一栏中网格项后面的伪元素，< / p>

• 在网格项上使用background来匹配列，因此从视图中隐藏行之间的阴影，

• 现在使用margin在bottom类中进行分隔。

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