如何将CSS样式应用于网格中的整个行？

Question

我有一个包含行和列的网格，每行形成一种节。我想为每行而不是每行元素添加阴影。我想整行地做。

我试图将行封装在一个“ div”中，但是它会破坏网格的结构（除非我们使用“ display：contents”，但是它不能应用阴影）。

我想知道是否可以在不破坏网格结构的情况下包装网格元素？

Picture of a row of my grid（我想在白色块上添加阴影）。

可能看起来像这样：

HTML：

<div class="row-wrapper">
  <div class="column1"></div>
  <div class="column2"></div>
  <div class="column3"></div>
</div>

CSS

.row-wrapper{
   box-shadow: 0px 0px 13px 0px rgba(82, 63, 105, 0.05);
}

Here is the original code (JSFiddle)

Answer 1

免责声明：大胆猜测您正在使用css-grid。

fiddle

CSS-Grid

要点：

<style>
  .header { grid-area: header; margin: 0.5rem; padding: 0.5rem; }
  .label-1 { grid-area: label-1; }
  .value-1 { grid-area: value-1; }
  .label-2 { grid-area: label-2; }
  .value-2 { grid-area: value-2; }
  .action { grid-area: action; }

  .row {
    display: grid;
    grid-template-areas:
      "header header header header header header header"
      "label-1 value-1 value-1 label-2 value-2 value-2 action";
    background-color: whitesmoke;
  }

  .rows, .row {
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1),
      0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem; margin: 0.5rem; padding: 0.5rem;
  }
</style>

<div class="rows">
  <div class="header">Data</div>
  <div class="row">
    <div class="label-1"><label for="r1mass">Mass</label></div>
    <div class="value-1"><input id="r1mass" type="text" /></div>
    <div class="label-2"><label for="r1species">Species</label></div>
    <div class="value-2"><input id="r1species" type="text" /></div>
    <div class="action"><button>+</button></div>
  </div>
  <div class="row">
    <div class="label-1"><label for="r2mass">Mass</label></div>
    <div class="value-1"><input id="r2mass" type="text" /></div>
    <div class="label-2"><label for="r2species">Species</label></div>
    <div class="value-2"><input id="r2species" type="text" /></div>
    <div class="action"><button>+</button></div>
  </div>
</div>