Question

我想为内容区域创建可点击的图块。为了实现这一点，我想使用CSS Grid并使各个区域可以点击。

<!DOCTYPE html>
<head>

<style class="cp-pen-styles">
body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}</style>
</head>
<body>
<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
</div>

</body>
</html>

我知道我可以在单个单元格中放置一个链接，但也许可以单击单个单元格作为一个整体？

Answer 1

你可以使用javascript让细胞响应onclick。或者，您可以将a标记用作网格，方法是将display:block添加到.box样式类，并提供所需的任何其他css属性。

需要注意的是，您无法在a标记中嵌套其他元素。

.box {
  display:block;
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}</style>
</head>
<body>
<div class="wrapper">
  <a class="box a" href="some_link">A</a>
  <a class="box b" href="some_link">B</a>
  <a class="box c" href="some_link">C</a>
  <a class="box d" href="some_link">D</a>
  <a class="box e" href="some_link">E</a>
  <a class="box f" href="some_link">F</a>
</div>

Answer 2

不使用锚点的JS解决方案：

window.addEventListener("DOMContentLoaded", function() {
  let boxes = document.querySelectorAll(".box");

  Array.from(boxes, function(box) {
    box.addEventListener("click", function() {
      alert(this.classList[1]);
    });
  });
});

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-template-rows: 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
/*   padding: 20px; */
  font-size: 150%;
  cursor: pointer;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
</div>

现在，您可以对每个单独的框使用display: flex来安排内部内容。

使用CSS Grid的可点击图块

2 个答案: