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>

Answer 1

Дружественные документы здесь .Официальная спецификация здесь .

#controller .dpad {
  display: grid;
  grid-template-areas: "key-a key-a . . . top ." " . key-z key-z . left bottom right";
  grid-gap: 6px;
}

#controller button {
  padding: 21% 0;
  font-size: 3.2vw;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, .42);
  border-radius: 6px;
  font-weight: 700;
}

#controller button[env3d-key^="KEY_UP"] {
  grid-area: top;
}

#controller button[env3d-key^="KEY_LEFT"] {
  grid-area: left;
}

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

#controller button[env3d-key^="KEY_DOWN"] {
  grid-area: bottom;
}

#controller button[env3d-key^="KEY_A"] {
  grid-area: key-a;
}

#controller button[env3d-key^="KEY_Z"] {
  grid-area: key-z;
}

<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>
    <button env3d-key="KEY_A">A</button>
    <button env3d-key="KEY_Z">Z</button>
  </div>

</div>

Answer 2

#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>

Используйте . для пустых областей.