setup_main()
<img src='cards/1.png' class='main' id='1' onclick='card_clicked(this);'>
function setup_main() {
  var s1="<img src='cards/";
  var s2=".png' class='main' id='";
  var s3="' onclick='card_clicked(this);'>";
  for (var i=1;i<52;i++) {
    if (i!=13 && i!=26 && i!=39) {
      document.write(s1+i+s2+i+s3);
    }
  }
}
styles.css
#main_panel {
  display:grid;
  grid-template-rows: repeat(15,5vmin);
  grid-template-columns: repeat(8,1fr);
  width:78vw;
}
.main {
  grid-column: 1 / span 1;
  width:90%;
  justify-self:center;
}

I think the only new bits for you are the fr and the vw units.
fr stands for fraction and the vw stands for viewport width.

repeat(8,1fr) means set up 8 columns all of equal size.

78vw means use 78% of the current screen width.