CSS-GRID：将可点击的div添加到布局中

Question

我拥有使用grid-css https://codesandbox.io/s/festive-water-vhkfw?file=/index.html构建的这些卡。问题是我需要使屏幕快照中突出显示的卡的一部分可单击并用包裹（除“单独”外，所有其他均可单击）。当我尝试这样做时，它完全破坏了我的布局。我是CSS网格的新手，将不胜感激。

<div class="outer">
  <div class="wrapper">
    <div class="color"></div>
    <div class="row">Row 1</div>
    <div class="info bottom-row">
      <div class="info-inner">
        <span> Info</span> <span> Separate</span>
      </div>
    </div>
    <div class="cell bottom-row">Cell 1</div>
    <div class="cell bottom-row">Cell 2</div>
    <div class="cell bottom-row">Cell 3</div>
  </div>
  <div class="wrapper">
    <div class="color bottom-row"></div>
    <div class="row">Row 1</div>
    <div class="info bottom-row">
      <div class="info-inner">
        <span> Info</span> <span> Separate</span>
      </div>
    </div>
    <div class="cell bottom-row">Cell 1</div>
    <div class="cell bottom-row">Cell 2</div>
    <div class="cell bottom-row">Cell 3</div>
  </div>
</div>

.outer {
  display: grid;
  grid-template-columns: 5px repeat(3, auto) auto;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #eee;
}

.color {
  grid-row-start: span 2;
  background: purple !important;
}

.row {
  padding: 1rem;
  grid-column: 2/-2;
}

.info {
  padding: 1rem 0;
  grid-row-start: span 2;
  display: flex;
}

.info-inner {
  padding: 1rem;
  border-left: 1px solid #eee;
}

.cell {
  padding: 1rem;
}

.bottom-row {
  border-bottom: 1px solid #eee;
}

.wrapper {
  display: contents;
  cursor: pointer;
}

.wrapper:last-child > * {
  border-bottom: 0;
}

Answer 1

您需要为想要跨度的类创建一个单独的类，然后使用：not函数忽略该类，使其不被选中，并告诉光标是初始的。

.outer {
  display: grid;
  grid-template-columns: 5px repeat(3, auto) auto;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #eee;
}

.color {
  grid-row-start: span 2;
  background: purple !important;
}

.row {
  padding: 1rem;
  grid-column: 2/-2;
}

.info {
  padding: 1rem 0;
  grid-row-start: span 2;
  display: flex;
}

.info-inner {
  padding: 1rem;
  border-left: 1px solid #eee;
}

.seperate:not(.wrapper) {
    cursor: initial;
}

.cell {
  padding: 1rem;
}

.bottom-row {
  border-bottom: 1px solid #eee;
  
}

.wrapper {
  display: contents;  
  cursor: pointer;

}

.wrapper:last-child > * {
  border-bottom: 0;
}

<div class="outer">
  <div class="wrapper">
    <div class="color"></div>
    <div class="row">Row 1</div>
    <div class="info bottom-row">
      <div class="info-inner">
        <span> Info</span> <span class="seperate"> Separate</span>
      </div>
    </div>
    <div class="cell bottom-row">Cell 1</div>
    <div class="cell bottom-row">Cell 2</div>
    <div class="cell bottom-row">Cell 3</div>
  </div>
  <div class="wrapper">
    <div class="color bottom-row"></div>
    <div class="row">Row 1</div>
    <div class="info bottom-row">
      <div class="info-inner">
        <span> Info</span> <span class="seperate"> Separate</span>
      </div>
    </div>
    <div class="cell bottom-row">Cell 1</div>
    <div class="cell bottom-row">Cell 2</div>
    <div class="cell bottom-row">Cell 3</div>
  </div>
</div>