带有 CSS Grid 的可点击图块答案

【问题标题】：Clickable tiles with CSS Grid带有 CSS Grid 的可点击图块
【发布时间】：2017-08-28 22:57:45
【问题描述】：

我想为内容区域创建可点击的图块。为了实现这一点，我想使用 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>

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

【问题讨论】：

标签： html css hyperlink css-grid

【解决方案1】：

不使用锚点的 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 合适。我现在如何在每个盒子上使用display:flex？
很高兴它有帮助。这实际上取决于您想要实现的目标。这是really good guide to Flexbox，你可以用它做什么。不要忘记接受正确的答案。

【解决方案2】：

您可以使用 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>

【讨论】：

感谢您的快速答复。使用diplay:block，我现在可以选择图块。但是，我想在各自的磁贴中有内容。通常是图片和文字（无链接）。我还看到一个问题是，当插入稍大的图像或文本时，图块会调整大小（它仍然是 CSS 网格）。一个不会改变其大小和位置的网格会很好。
添加 overflow:hidden 应该可以防止您的图块根据内容调整大小，只要块图块也具有定义的尺寸（宽度、高度）。但是，您最终可能会遇到平铺内容被隐藏溢出剪切的情况。由于tiles混合了html，最好的方法是将它们设置为<div>元素并使用javascript来提供链接功能。