CSS网格中的列周围的盒子阴影

Question

CSS网格中的列周围的盒子阴影

4

我目前有一个包含动态行数的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>

- Chris

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kukkuz · Accepted Answer

没有办法将样式应用于特定列或行中的所有网格项，也无法对它们进行分组。您已经在尝试直接选择元素了。

hacky 解决方案

这里我将利用您使用 top, middle 和 bottom 类并创建 box shadow 效果的事实：

给第一列中的 伪元素 应用一个 便捷的 box-shadow，
在 网格项 上使用 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>