CSS Grid:如何使网格单元格成为超链接目标？

<div class="grid-container">
  <!-- 网格单元格 -->
  <div class="grid-item">单元格1</div>
  <div class="grid-item">单元格2</div>
  <div class="grid-item">单元格3</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列 */
  grid-template-rows: repeat(2, 1fr); /* 2行 */
  gap: 10px; /* 单元格间隔 */
}

<div class="grid-container">
  <div class="grid-item">
    <a href="https://example.com">单元格1</a>
  </div>
  <div class="grid-item">
    <a href="https://example.com">单元格2</a>
  </div>
  <div class="grid-item">
    <a href="https://example.com">单元格3</a>
  </div>
</div>

.grid-item a {
  display: block;
  padding: 10px;
  background-color: #f1f1f1;
  color: #333;
  text-decoration: none;
  border: 1px solid #ccc;
  border-radius: 5px;
}