HTML/CSS How Do I use grid-template property

up vote
0
down vote

favorite

Doing some HTML/CSS coding homework and I want to make a grid-template for my buttons so that they are positioned where they are relative, like in a game where the up button is at the top, right button at the right etc. Any help is appreciated it. Thanks in advance.

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

edited Nov 19 at 13:37

Temani Afif

62.2k93573

asked Nov 19 at 13:03

Michael Kheong

add a comment |

up vote
0
down vote

favorite

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

edited Nov 19 at 13:37

Temani Afif

62.2k93573

asked Nov 19 at 13:03

Michael Kheong

add a comment |

up vote
0
down vote

favorite

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

edited Nov 19 at 13:37

Temani Afif

62.2k93573

asked Nov 19 at 13:03

Michael Kheong

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

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

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

html css css3 css-grid

edited Nov 19 at 13:37

Temani Afif

62.2k93573

asked Nov 19 at 13:03

Michael Kheong

edited Nov 19 at 13:37

Temani Afif

62.2k93573

asked Nov 19 at 13:03

Michael Kheong

edited Nov 19 at 13:37

Temani Afif

62.2k93573

edited Nov 19 at 13:37

Temani Afif

62.2k93573

edited Nov 19 at 13:37

Temani Afif

62.2k93573

asked Nov 19 at 13:03

Michael Kheong

asked Nov 19 at 13:03

Michael Kheong

asked Nov 19 at 13:03

Michael Kheong

add a comment |

2 Answers
2

active

oldest

votes

up vote
1
down vote

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

Use . fo blank areas.

answered Nov 19 at 13:17

Smollet777

1,101915

Thanks. I appreciate it.
– Michael Kheong
Nov 19 at 13:19

add a comment |

up vote
1
down vote

Friendly docs here. Official spec here.

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

edited Nov 19 at 13:35

answered Nov 19 at 13:28

Andrei Gheorghiu

32k74373

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53375276%2fhtml-css-how-do-i-use-grid-template-property%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

up vote
1
down vote

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

Use . fo blank areas.

answered Nov 19 at 13:17

Smollet777

1,101915

Thanks. I appreciate it.
– Michael Kheong
Nov 19 at 13:19

add a comment |

up vote
1
down vote

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

Use . fo blank areas.

answered Nov 19 at 13:17

Smollet777

1,101915

Thanks. I appreciate it.
– Michael Kheong
Nov 19 at 13:19

add a comment |

up vote
1
down vote

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

Use . fo blank areas.

answered Nov 19 at 13:17

Smollet777

1,101915

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

Use . fo blank areas.

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

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

answered Nov 19 at 13:17

Smollet777

1,101915

answered Nov 19 at 13:17

Smollet777

1,101915

answered Nov 19 at 13:17

Smollet777

1,101915

answered Nov 19 at 13:17

Smollet777

1,101915

Thanks. I appreciate it.
– Michael Kheong
Nov 19 at 13:19

add a comment |

Thanks. I appreciate it.
– Michael Kheong
Nov 19 at 13:19

Thanks. I appreciate it.
– Michael Kheong
Nov 19 at 13:19

add a comment |

up vote
1
down vote

Friendly docs here. Official spec here.

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

edited Nov 19 at 13:35

answered Nov 19 at 13:28

Andrei Gheorghiu

32k74373

add a comment |

up vote
1
down vote

Friendly docs here. Official spec here.

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

edited Nov 19 at 13:35

answered Nov 19 at 13:28

Andrei Gheorghiu

32k74373

add a comment |

up vote
1
down vote

Friendly docs here. Official spec here.

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

edited Nov 19 at 13:35

answered Nov 19 at 13:28

Andrei Gheorghiu

32k74373

Friendly docs here. Official spec here.

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

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

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

edited Nov 19 at 13:35

answered Nov 19 at 13:28

Andrei Gheorghiu

32k74373

edited Nov 19 at 13:35

answered Nov 19 at 13:28

Andrei Gheorghiu

32k74373

answered Nov 19 at 13:28

Andrei Gheorghiu

32k74373

answered Nov 19 at 13:28

Andrei Gheorghiu

32k74373

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Argthtjtr