为什么 Grid Container 选择只显示第一列？

Question

我知道 CSS 很危险，但效率不高。我刚刚了解了网格。

在我的下图中，您会看到我设置了一个 2 列网格。左栏包含“项目名称”。这是一个 li 标签。右栏包含一个设置齿轮图标。这是一个跨度标签。这些都是 children 的 parent div

我在 parent div 上设置了网格，我在下图中滚动了它。 为什么网格容器的大小只是第一列的大小而不是整行的大小？

这让我感到困惑，因为我希望在翻转行时在整行上有一个边框。

我的 HTML (JSX):

<div className={styles.project}>
  <li onClick={() => props.onSelect(props.name)}>{props.name}</li>
  <span className={styles.settings}>{"\u2699"}</span>
</div>

我的CSS:

.project {
  font-family: "Rubik", sans-serif;
  grid-template-areas: "name settings";
  grid-template-columns: 150px 35px;
  grid-gap: 0px;
  display: grid;
  cursor: pointer;
  width: 100%;
  font-size: 13px;
}

.project li:hover {
  border-radius: 200px;
  border: 1px solid;
  padding-right: 160px;
}

.project li {
  list-style-type: none;
  grid-area: name;
  padding: 10px;
  margin: 10px;
}

.project .settings {
  grid-area: settings;
  text-align: center;
  align-self: center;
  font-size: 18px;
}

.project .settings:hover {
  border-radius: 200px;
  border: 1px solid;
  padding-right: -160px;
}

Answer 1

看起来这是因为我为第一个网格列选择的大小：

grid-template-columns: 150px 35px;

这很好，只是我当时添加了填充和边距，所以它推出了第二个网格。

改为：

解决

grid-template-columns: auto 35px;

并将我的悬停设置为

（注意：在我上面的示例中，我将鼠标悬停在 li 标签上）

.project:hover {
  border-radius: 200px;
  border: 1px solid;
  border-width: 100%;
}

为什么 Grid Container 选择只显示第一列？

Why is the Grid Container selection only showing the first column?

css

css-grid