Javascript 使用箭头在网格中导航

希望使用JS在生成的网格中实现箭头导航。使用鼠标的悬停效果非常好，但我想使用箭头键复制导航。我尝试了

keydown

，因为箭头不起作用

CSS

JS

body {
  margin: 13rem;
  display: grid;
  background-color:#272d32;
  grid-template-columns: repeat(auto-fit, minmax(220px, 220px));
  grid-gap: 2rem;

}
img {
  max-width: 100%;
    width: 100%;
/*  height: 100%;*/
  object-fit: cover;
  display: block; 
  transition: .2s;
 
}


article {
box-sizing: border-box;
  border-radius: 0px;
  overflow: hidden;
  height: 240px;
  font: 12px/1.1 system-ui, sans-serif;
    transition: .2s;
  a {
    text-decoration: none;
    color: #455A64;
    &:hover, &:focus {
      color: #2196F3;
    }
  }
  h2 {
    padding: 1rem 1rem;
    margin: 0;
  }
}

article:hover {
  border:solid;
  border-color: white;
    border-collapse: separate;
 border-spacing: 5px 1rem;
  border-width: 2px;
  transition: .2s;
}




article:first-of-type {
  display:none;
}

article:nth-of-type(2) {
    grid-column: 1 / 4;
  grid-row: 1 / 3;
  height: calc(480px + 2rem);
   width: calc(700px + 2rem);
    transition: .2s;

  
}

article:nth-of-type(2) img {
  margin-top:-60%;  
}

h2{display:none;}
h3{display:none;}

article:nth-of-type(2) h2 {
  display:block;
  position:relative;
  top:55%;
  background-color: #290f21;
  color:white;
  width:60%;
  font-size:25px;
  margin-left:5%;
}

article:nth-of-type(2) h3 {
  display:block;
  position:relative;
  width:35%;
  top:4%;
  background-color: #0078f9;
  color:white;
  padding:10px;
  font-size:20px;
  letter-spacing: 2px;
}

article:nth-of-type(9) {
display:none;
}

const RSS_URL = 'https://cors-anywhere.herokuapp.com/https://fitgirl-repacks.site/feed/';

fetch(RSS_URL)
  .then(response => response.text())
  .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
  .then(data => {
    console.log(data);
    const items = data.querySelectorAll("item");
    let html = ``;
    items.forEach(el => {
      var image = null;
      var encoded = new window.DOMParser().parseFromString(
        el.getElementsByTagNameNS("*", "encoded").item(0).innerHTML,
        "text/html"
      );
      // console.log(encoded.querySelectorAll('img').item(0) ? null.src)
      if (encoded.querySelector('img') != null) {
        image = encoded.querySelector('img').src;
      } else {
        return true;
      }
      
      
      html += `

        <article>
<h3>This week's premier</h3>
         <h2>${el.querySelector("title ").innerHTML}
          </h2>
            <a  href="${el.querySelector("link").innerHTML}" target="_blank" rel="noopener">
             
            
            <img src="${image}" alt="" /></a>
        </article>
      `;
    });
    document.body.insertAdjacentHTML("beforeend", html);
  });

var currCell = $('td').first();
var editing = false;

// User clicks on a cell
$('td').click(function() {
    currCell = $(this);
    edit();
});

  // User navigates table using keyboard
$('table').keydown(function (e) {
    var c = "";
    if (e.which == 39) {
        // Right Arrow
        c = currCell.next();
    } else if (e.which == 37) { 
        // Left Arrow
        c = currCell.prev();
    } else if (e.which == 38) { 
        // Up Arrow
        c = currCell.closest('tr').prev().find('td:eq(' + 
          currCell.index() + ')');
    } else if (e.which == 40) { 
        // Down Arrow
        c = currCell.closest('tr').next().find('td:eq(' + 
          currCell.index() + ')');
    } else if (!editing && (e.which == 13 || e.which == 32)) { 
        // Enter or Spacebar - edit cell
        e.preventDefault();
        edit();
    } else if (!editing && (e.which == 9 && !e.shiftKey)) { 
        // Tab
        e.preventDefault();
        c = currCell.next();
    } else if (!editing && (e.which == 9 && e.shiftKey)) { 
        // Shift + Tab
        e.preventDefault();
        c = currCell.prev();
    } 
    
    // If we didn't hit a boundary, update the current cell
    if (c.length > 0) {
        currCell = c;
        currCell.focus();
    }
});