previous

page 3

next
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.

previous
next