Как я могу применить стиль CSS ко всей строке в сетке? - PullRequest
Новая
       14

Как я могу применить стиль CSS ко всей строке в сетке?

0 голосов
/ 26 января 2019

У меня есть сетка со строками и столбцами, каждая строка образует своего рода раздел. Я хотел бы применить тень к каждой строке, но не к каждому элементу строки. Я хотел бы сделать это для всего ряда.

Я пытался инкапсулировать строки в "div", но он разрушает структуру сетки (если мы не используем "display: contents", но это не работает для применения тени).

Мне бы хотелось знать, можно ли обернуть элементы сетки, не нарушая ее структуру?

Изображение строки моей сетки (я хотел бы применить тень к белому блоку).

Нечто похожее на это:

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);
}

Вот оригинальный код (JSFiddle)

1 Ответ

0 голосов
/ 27 января 2019

Отказ от ответственности: предположить, что вы используете 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>
...