一种选择是用div Package row元素，在 Package 器div中包含样式display: contents;，将click处理程序添加到 Package 器div中。
CSS网格在布局内容时会将 Package 器内的元素视为没有 Package 器，因此它们会根据您的需要对齐。请参阅MDN display-box了解更多信息。该链接还指出了浏览器在display: contents;方面存在辅助功能错误。
display: contents;不允许样式。要突出显示整个网格行，您需要使用其他CSS技术。这个 Package 器div可以用在CSS选择器中。
到目前为止，我只使用Firefox进行了测试。

<div class="myGrid">

  <div class="row" onclick="console.log('click');">
    <div class="anchor" id="item1">
      <i class="image material-icons">folder_open</i>
    </div>
    <span class="text">Open...</span>
    <span class="shortcut">Ctrl+O</span>
  </div>

  <div class="row" onclick="console.log('click');">
    <div class="anchor" id="item2">
      <i class="image material-icons">save</i>
    </div>
    <span class="text">Save...</span>
    <span class="shortcut">Ctrl+S</span>
  </div>

  <div class="row" onclick="console.log('click');">
    <div class="anchor" id="item3"></div>
    <span class="text">Action</span>
  </div>

  <div class="separator"></div>

  <div class="row" onclick="console.log('click');">
    <div class="anchor" id="item4"></div>
    <span class="text">Exit</span>
    <span class="shortcut">Ctrl+X</span>
  </div>

</div>

.myGrid {
  border: 1px solid black;
  display: grid;
  grid-template-columns: 20px auto auto;
  grid-gap: 2px 6px;
  align-items: center;
  justify-items: start;
  padding: 10px;
  box-sizing: border-box;
}
.row {
  display: contents;
}
.image { 
  width: 24px;
}
.text {
  height: 28px;
  line-height: 28px
}
.shortcut {
  justify-self: end;
  padding: 0 5px;
  height: 28px;
  line-height: 28px
}
.separator {
  grid-column: 1 / span 3;
  width: 100%;
  height: 3px;
  border-bottom: 1px solid lightgray;
}

我终于让它工作了。我最终做的是使锚元素具有相对位置。然后我在锚元素下添加了一个具有绝对位置的新div。在JavaScript中，我可以将新元素的大小调整为网格的全宽，并使用z-index相应地定位它相对于行中其他元素的位置。

首先，您可能需要更改html，以便.anchor元素 Package 每个条目。

<div class="myGrid">
    <div class="anchor" id="item1">
        <i class="image material-icons">folder_open</i>
        <span class="text">Open...</span>
        <span class="shortcut">Ctrl+O</span>
    </div>
    <div class="anchor" id="item2">
        <i class="image material-icons">save</i>
        <span class="text">Save...</span>
        <span class="shortcut">Ctrl+S</span>
    </div>
    <div class="anchor" id="item3">
        <span class="text">Action</span>
    </div>
    <div class="separator"></div>
    <div class="anchor" id="item4">
        <span class="text">Exit</span>
        <span class="shortcut">Ctrl+X</span>
    </div>
</div>

然后使用flex对齐每个项目的内容

.myGrid {
  border: 1px solid black;
  padding: 10px;
  box-sizing: border-box;
}

.anchor {
  display: flex;
  justify-content: flex-start;
}

/* Hover for each anchor */
.anchor:hover {
    background: red;
}

.image { 
    width: 24px;
}

.text {
    height: 28px;
    line-height: 28px
}

.shortcut {
    margin-left: auto; /* push the shortcut to the right */
    padding: 0 5px;
    height: 28px;
    line-height: 28px
}

.separator {
    grid-column: 1 / span 3;
    width: 100%;
    height: 3px;
    border-bottom: 1px solid lightgray;
}

https://codepen.io/anon/pen/xQWLaE

.anchor:hover > 
       .mygrid
       { background:red }

检查这个如果它工作在悬停item1它将改变边界颜色（从黑色到红色作为突出显示）