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

Question

I have a grid with rows and columns, each line forms a kind of section. I would like to apply a shadow to each row but not to every element of the row. I would like to do it for the whole row.

I tried to encapsulate the rows in a "div" but it deconstructs the structure of the grid (unless we use "display: contents" but it doesn't work to apply a shadow).

I would have liked to know if it is possible to wrap elements of a grid without breaking its structure?

Picture of a row of my grid (I would like to apply a shadow to the white block).

Something that would probably look like that:

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

Disclaimer: taking a wild guess that you are using css-grid.

fiddle

CSS-Grid

gist:

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