网格项在 link 中包装后不会跨行

Question

我回避的时间最长 html/CSS 到现在为止。首先，我想构建一个简单的 CSS 网格网站。网格中的 3 个项目。一切正常，看起来就像我想要的那样。像这样：

但我想将整个 Aside-Items 用作 Hyperlink。所以我在它周围包裹了一个 href= 但同样的 CSS 看起来像这样。

问题：

如何从图一中看到 "Aside-GridItem" 是 Hyperlink 的功能？
这样可以吗？或者我是否遇到 "hiddin" 的 SEO 问题 link with text-decoration : none?

这是我的代码：

.gridwrapper{
  display:grid;
  
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 3fr;
  grid-column-gap: 1px;
  background-color: wheat;
  gap: 5px;
}

.gridHeader{
  background-color:blueviolet;
  font-family: Helvetica, sans-serif;
  font-size: 32px;
  padding: 1em;

  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

.gridContent{
  background-color:blue;
  font-family: Helvetica, sans-serif;
  font-size: 32px;
  padding: 1em;

  grid-row: 2 / 3;
  grid-column: 1 / 2;
}

.gridAside{
  background-color:goldenrod;
  font-family: Helvetica, sans-serif;
  font-size: 32px;
  padding: 1em;

  grid-row: 1 / 3;
  grid-column: 2 / 3;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="main.css">
  <title>BlazorFK</title>
</head>
<body>

<div class="gridwrapper">
  <div class="gridHeader">HEADER</div>
  <div class="gridContent">...content...</div>
  <a href="https://google.com" style="text-decoration: none;">
    <div class="gridAside">Aside</div>
  </a>
</div>
</body>
<script></script>
</html>

Answer 1

将此 class class="gridAside" 移至父级 link 以便

<a class="gridAside" href="https://google.com" style="text-decoration: none;">

例子

.gridwrapper {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 3fr;
  grid-column-gap: 1px;
  background-color: wheat;
  gap: 5px;
}

.gridHeader {
  background-color: blueviolet;
  font-family: Helvetica, sans-serif;
  font-size: 32px;
  padding: 1em;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

.gridContent {
  background-color: blue;
  font-family: Helvetica, sans-serif;
  font-size: 32px;
  padding: 1em;
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}

.gridAside {
  background-color: goldenrod;
  font-family: Helvetica, sans-serif;
  font-size: 32px;
  padding: 1em;
  grid-row: 1 / 3;
  grid-column: 2 / 3;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>BlazorFK</title>
</head>
<body>
  <div class="gridwrapper">
    <div class="gridHeader">HEADER</div>
    <div class="gridContent">...content...</div>
    <a class="gridAside" href="https://google.com" style="text-decoration: none;">
      <div>Aside</div>
    </a>
  </div>
</body>

</html>

网格项在 link 中包装后不会跨行

Grid Item doesn't span across rows after wrapping it in link

html

css

layout

css-grid

例子