CSS-GRID：向布局添加可点击的 div答案

【问题标题】：CSS-GRID: add a clickable div to layoutCSS-GRID：向布局添加可点击的 div
【发布时间】：2020-05-12 23:22:45
【问题描述】：

我有这些使用 grid-css 构建的卡片问题是我需要使屏幕截图中突出显示的卡片部分可点击，包裹（除了“单独”之外，所有内容都应该是可点击的）。当我尝试这样做时，它完全破坏了我的布局。 [![在此处输入图像描述][1]][1] 我是 css-grid 的新手，将不胜感激。

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

【问题讨论】：

标签： css layout css-grid

【解决方案1】：

你需要为你的 span 创建一个你想要分开的类，然后使用 :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>

【讨论】：

太酷了！但我真的需要它是一个单独的东西，'Separte' 将是一个按钮，一旦你点击它就会发生一些事情。如果你点击卡片 - 另一件事会发生。
嗯，我不明白为什么它对你不起作用。你可以很容易地把它变成一个按钮并做任何你需要做的事情，看这里jsfiddle.net/2L3mqsbj也许我只是不明白这个问题。
明白了，我再看看。
可能不是最好的方法，但我得到了它的工作。这对你有用吗？ jsfiddle.net/5k79Lz4v我将您的 onclick 函数从主包装器更改为仅单个单元格类，并为单独的部分制作了不同的函数。
是的，我想，除了重写所有 CSS 之外，我还非常了解 CSS 的想法。您可能需要在 JS 中执行此操作。我在这里找到了这个链接，它可能会提供一些见解。 stackoverflow.com/questions/26061254/…