CSS-GRID:向布局添加可点击的 div

Question

我有这些使用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;
}

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>