grid-item-dir-001.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<style type="text/css">

.grid {

  display: grid;

  border: 1px solid gray;

  grid-template-columns: 100px 150px 50px 20px;

  grid-template-rows: 50px 100px 20px;

.grid > div {

  margin: 2px;

#a { background: #006; }

#b { background: #009; }

#c { background: #00c; }

#d { background: #00f; }

#e { background: #060; }

#f { background: #090; }

#g { background: #0c0; }

#h { background: #0f0; }

#i { background: #600; }

#j { background: #900; }

#k { background: #c00; }

#l { background: #f00; }

</style>

</head>

<body>

<div class=grid>

  <div id=a></div>

  <div id=b></div>

  <div id=c></div>

  <div id=d></div>

  <div id=e dir=rtl></div>

  <div id=f dir=rtl></div>

  <div id=g dir=rtl></div>

  <div id=h dir=rtl></div>

  <div id=i></div>

  <div id=j dir=rtl></div>

  <div id=k></div>

  <div id=l dir=rtl></div>

</div>

</body>

</html>