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

Question

我有一个包含行和列的网格，每行构成一种部分。我想对每一行应用阴影，但不是对行的每个元素应用阴影。我想对整行都这样做。

我试图将行封装在“div”中，但它解构了网格的结构(除非我们使用“display:contents”，但它无法应用阴影)。

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

Picture of a row of my grid (我想在白色 block 上应用阴影)。

可能看起来像这样的东西:

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>