html - HTML/CSS 如何使用 grid-template 属性

Question

做一些 HTML/CSS 编码作业，我想为我的按钮制作一个网格模板，以便它们位于相对的位置，例如在向上按钮位于顶部、右侧按钮位于右侧等的游戏中。任何帮助表示赞赏。提前致谢。

#controller>.dpad {
  display: grid;
  grid-template-areas: " main right header footer ";
}

#controller>.dpad>button[env3d-key^="KEY_UP"] {
  grid-area: header;
}

#controller>.dpad>button[env3d-key^="KEY_LEFT"] {
  grid-area: main;
}

#controller>.dpad>button[env3d-key^="KEY_RIGHT"] {
  grid-area: right;
}

#controller>.dpad>button[env3d-key^="KEY_DOWN"] {
  grid-area: footer;
}

<div id="controller">
  <div class="dpad">
    <button env3d-key="KEY_UP">UP</button>
    <button env3d-key="KEY_LEFT">LEFT</button>
    <button env3d-key="KEY_RIGHT">RIGHT</button>
    <button env3d-key="KEY_DOWN">DOWN</button>
  </div>
  <button env3d-key="KEY_A">A</button>
  <button env3d-key="KEY_Z">Z</button>
</div>

标签： htmlcsscss-grid

Answer 1

#controller>.dpad {
  display: grid;
  grid-template-areas: ". header ."
                      "main . right"
                      ". footer .";
}

#controller>.dpad>button[env3d-key^="KEY_UP"] {
  grid-area: header;
}

#controller>.dpad>button[env3d-key^="KEY_LEFT"] {
  grid-area: main;
}

#controller>.dpad>button[env3d-key^="KEY_RIGHT"] {
  grid-area: right;
}

#controller>.dpad>button[env3d-key^="KEY_DOWN"] {
  grid-area: footer;
}

<div id="controller">
  <div class="dpad">
    <button env3d-key="KEY_UP">UP</button>
    <button env3d-key="KEY_LEFT">LEFT</button>
    <button env3d-key="KEY_RIGHT">RIGHT</button>
    <button env3d-key="KEY_DOWN">DOWN</button>
  </div>
  <button env3d-key="KEY_A">A</button>
  <button env3d-key="KEY_Z">Z</button>
</div>

用于.空白区域。