GRID 元素的问题，在 GRID 网格内的元素之间移动 [已关闭]-解网

问：

想改进这个问题吗？通过编辑这篇文章添加详细信息并澄清问题。

9天前关闭。

改进此问题

如您所见，有一个灰色块是整个元素的宽度和高度，粉红色条纹是一种隐藏的网格，灰色块的父元素隐藏了溢出样式，绿色和红色元素是子元素。

Image of the grid

问题在于，即使借助 Javascript 或指向元素的链接，也无法移动到这些元素。例如：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  display: grid;
  place-content: center;
}

.container {
  width: 15vh;
  height: 15vh;
  display: inline-grid;
  grid-auto-rows: 100%;
  grid-auto-columns: 100%;
  grid-template-areas: "a b c d e" "f g h i j" "k l m n o" "p r s t u" "v w x y z";
  background: rgba(0, 0, 0, .5);
  /* place-content: center; */
  overflow: hidden;
  scroll-behavior: smooth;
}

.block#one {
  grid-area: e;
  background: red;
}

.block#two {
  grid-area: h;
  background: green;
}

<div class="container">
  <div class="block" id="one"></div>
  <div class="block" id="two"></div>
</div>

在示例代码中，您可以检查移动到元素是否由于问题而失败，例如为什么不起作用：one.scrollIntoView(); //doesn't work why?

我想实现的是，一个带有网格的父元素，例如，3 x 3 或 5 x 5，在这个网格内，只显示中间的子元素。在中间的子元素中，有一些链接可以过渡到侧子元素。当然，如果可能的话，没有 javascript 和其他元素

HTML CSS 网格

GRID 元素的问题，在 GRID 网格内的元素之间移动 [已关闭]

Problem with GRID elements, moving through elements within the GRID grid [closed]

评论