如何设置 CSS 网格行的样式？

Question

我知道不可能对网格行或列本身进行样式设置，因为它只是隐式构造，并且只能对构建特定行或列的 HTML 元素进行样式设置。

我想知道如何添加一个 HTML 项目作为构建每一行的其他几个 HTML 元素的“背景”，以便为每一行添加一个

box-shadow

。有什么方法可以使其无需解决方法，并且无需为每个网格项手动指定

grid-column

和

grid-row

（如下面的第二个示例）？

编辑： 我还必须承认，我想动态添加多行，因此不可能手动指定网格布局中的每个元素位置。

.list{
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-auto-rows: 3em;
  grid-row-gap: .5em;
  margin: 2em;
  padding: .2em;
  width: 360px;
}

.list .grid-shadow{
  box-shadow: 2px 2px 6px 4px rgba(220,220,220);
  grid-column: span 4;
}

.manual span:nth-child(1){
  grid-column: 1 / span 4;
  grid-row: 1;
}

.manual span:nth-child(2){
  grid-column: 1;
  grid-row: 1;
}
.manual span:nth-child(3){
  grid-column: 2;
  grid-row: 1;
}
.manual span:nth-child(4){
  grid-column: 3;
  grid-row: 1;
}
.manual span:nth-child(5){
  grid-column: 1 / span 4;
  grid-row: 2;
}
.manual span:nth-child(6){
  grid-column: 1;
  grid-row: 2;
}
.manual span:nth-child(7){
  grid-column: 2;
  grid-row: 2;
}
.manual span:nth-child(8){
  grid-column: 3;
  grid-row: 2;
}

<h2>I want the items with data to be placed "within" the shadowed element</h2>
<div class="list">
  <span class="grid-shadow"></span>
  <span>John</span>
  <span>Doe</span>
  <span>[email protected]</span>
  <span class="grid-shadow"></span>
  <span>Susane</span>
  <span>Simpson</span>
  <span>[email protected]</span>
</div>

<h2>How it should look like:</h2>
<div class="list manual">
  <span class="grid-shadow"></span>
  <span>John</span>
  <span>Doe</span>
  <span>[email protected]</span>
  <span class="grid-shadow"></span>
  <span>Susane</span>
  <span>Simpson</span>
  <span>[email protected]</span>
</div>

Answer 1

绝对和伪在这里可能就足够了：

.list {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-auto-rows: 3em;
  grid-row-gap: .5em;
  margin: 2em;
  padding: .2em;
  width: 360px;
  position: relative;
}

.list span:nth-child(3n + 1):before {
  content: '';
  height: 3em;/* matching row template */
  width: 100%;
  box-shadow: 2px 2px 6px 4px rgba(220,220,220);
  position: absolute;
}

<div class="list">
  <span>John</span>
  <span>Doe</span>
  <span>[email protected]</span>

  <span>Susane</span>
  <span>Simpson</span>
  <span>[email protected]</span>
  
</div>

Answer 2

我用

clip-path

找到了另一个解决方案。

.list{
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-auto-rows: 3em;
  grid-row-gap: 2em;
  grid-column-gap: 0px;
  margin: 2em;
  padding: .2em;
  width: 380px;
}

.list>*{
  background-color: white;
  box-shadow: 0px 0px 8px 4px grey;
}

.list>*:nth-child(3n+1){ /*left of row*/
  clip-path: polygon(-50% -50%, -50% 150%, 100% 150%, 100% -50%);
}

.list>*:nth-child(3n){ /*right of row*/
  clip-path: polygon(0% -50%, 0% 150%, 150% 150%, 150% -50%);
}

.list>*:not(:nth-child(3n+1)):not(:nth-child(3n)){ /*middle of row*/
  clip-path: polygon(0% -50%, 0% 150%, 100% 150%, 100% -50%);
}

<div class="list">
  <span>John</span>
  <span>Doe</span>
  <span>[email protected]</span>
  <span>Susane</span>
  <span>Simpson</span>
  <span>[email protected]</span>
</div>

Answer 3

我有与 G-Cyrillus 类似的方法，但通过独立地为每个单元格创建一个阴影伪元素，而不需要知道高度值，这使得它更加动态。然而，它需要设置 z-index，否则阴影将在单元格之间重叠。要设置新的堆叠上下文，需要设置网格包装器中的 z-index。希望它对任何人都有帮助...

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  row-gap: 10px;
  z-index:1;
  position: relative;
}

.grid :nth-child(n) {
  background-color: white;
  height: 50px;
  position: relative;
  z-index: auto;
}

.grid :nth-child(n)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: 0 0 12px black;
  z-index: -1;
}

  <div class="grid">
    <span>
      John
    </span>
    <span>
      Doe
    </span>
    <span>
      [email protected]
    </span>
    <span>
      Susane
    </span>
    <span>
      Simpson
    </span>
    <span>
      [email protected]
    </span>
  </div>