<html>
<head>
<title>Grid Layout - RJM Programming - October, 2026</title>
<style>
.container {
display: grid;
grid-template-columns: auto auto auto;
background-color: dodgerblue;
padding: 10px;
}
.container div {
background-color: #f1f1f1;
border: 1px solid black;
padding: 10px;
font-size: 30px;
text-align: center;
}
</style>
<script type=text/javascript>
var postdiv='', woo=null, lastval='';
var score=0, goes=0;

function changeit(oin) {
if (oin.value.trim() != '') {
document.getElementById('mydiv').innerHTML='<div' + postdiv + '>' + oin.value.replace(/\,/g,'</div><div' + postdiv + '>') + '</div>';
oin.placeholder=oin.value;
}
}

function quizimgid(divo) {
if (divo.innerHTML.indexOf('-') != 0) {
divo.style.backgroundImage='url(//www.rjmprogramming.com.au/NZ/IMG_' + divo.innerHTML + '.jpeG)';
divo.style.backgroundSize='contain';
divo.style.backgroundRepeat='no-repeat';
if (woo) {
if (!woo.closed) {
woo.close();
woo=null;
}
}
woo=window.open('//www.rjmprogramming.com.au/PHP/read_exif_off_image_rotate.php?image=http://www.rjmprogramming.com.au/NZ/IMG_' + divo.innerHTML + '.jpeG', '_blank', 'top=100,left=' + eval(-800 + screen.width) + ',width=800,height=800');
}
}

function firstcheck() {
if (document.URL.indexOf('#') != -1) {
var lhlook=decodeURIComponent(document.URL.split('#')[1]);
if (document.URL.indexOf('quiz=') != -1) {
postdiv=location.search.split('quiz=')[1] ? decodeURIComponent(location.search.split('quiz=')[1].split('&')[0]).replace(/\+/g,' ') : '';
if (postdiv.indexOf('onclick') != -1 && postdiv.indexOf('quizimgid') == -1) {
postdiv=' style="cursor:pointer;" onclick="quizimgid(this);"';
}
if (lhlook == '') {
lhlook="4418,4419,-4420,4421,4422,-4423,-4424,4425,4426,4427,";
lhlook+="4428,4429,4430,4431,4432,4433,-4434,4435,4436,4437,";
lhlook+="4438,-4439,-4440,4441,4442,-4443,-4444,4445,4446,-4447,";
lhlook+="4448,4449,4450,4451,-4452,-4453,-4454,4455,4456,4457,";
lhlook+="-4458,-4459,-4460,-4461,4462,-4463,4464,4465,4466,4467,";
lhlook+="4468,4469,4470,4471,4472,4473,4474,4475,4476,-4477,";
lhlook+="-4478,4479,4480,-4481,4482,4483,-4484,-4485,-4486,-4487,";
lhlook+="4488,4489,4490,4491,4492,4493,4494,4495,4496,4497,";
lhlook+="4498,-4499,4500,4501,4502,-4503,-4504,4505,4506,4507,";
lhlook+="4508,4509,4510,4511,4512,4513,4514,4515,4516,4517,";
lhlook+="4518,4519,4520,4521,4522,4523,4524,4525,-4526,4527,";
lhlook+="4528,4529,4530,4531";
}
}
document.getElementById('mylist').value=lhlook;
changeit(document.getElementById('mylist'));
if (document.URL.indexOf('quiz=') != -1) {
document.getElementById('subj').innerHTML='Scenery Geolocation Quiz ';
document.getElementById('mydiv').title='Click/tap an image number below.';
}
}
}

function myhonecheck() {
if (lastval != document.getElementById('myh1').title) {
score+=eval('' + document.getElementById('myh1').title);
goes++;
document.getElementById('subj').title='Scenery Geolocation Quiz scores are best when small.';
document.getElementById('subj').innerHTML='Scenery Geolocation Quiz <sup>Score: ' + score + '</sup>/<sub>' + goes + ' :Goes</sub> ';
document.getElementById('myh1').title='';
if (woo) {
if (!woo.closed) {
woo.close();
woo=null;
}
}
}
}

setInterval(myhonecheck, 3000);
</script>
</head>
<body onload=firstcheck();>

<h1 title='' id=myh1><span id=subj title=''>Months </span>Grid Layout</h1>
<h3>RJM Programming - October, 2026 ... thanks to <a target=_blank title='W3schools help' href='https://www.w3schools.com/css/tryit.asp?filename=trycss_grid'>W3schools</a></h3>
<input title="Feel free to enter your own (CSV) data, comma separated, here." style=width:96%; onkeydown="document.getElementById('subj').innerHTML='';" type=text id=mylist onblur=changeit(this); value="" placeholder="January,February,March,April,May,June,July,August,September,October,November,December"></input>
<br><br>



<div id="mydiv" class="container" title="">
<div>January</div>
<div>February</div>
<div>March</div>
<div>April</div>
<div>May</div>
<div>June</div>
<div>July</div>
<div>August</div>
<div>September</div>
<div>October</div>
<div>November</div>
<div>December</div>
</div>

</body>
</html>