{"id":56578,"date":"2022-08-08T03:01:40","date_gmt":"2022-08-07T17:01:40","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=56578"},"modified":"2022-08-07T16:03:43","modified_gmt":"2022-08-07T06:03:43","slug":"css-grid-column-context-history-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-grid-column-context-history-tutorial\/","title":{"rendered":"CSS Grid Column Context History Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/div_grid_rearrange.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS Row Gap Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/div_grid_rearrange_history.jpg\" title=\"CSS Row Gap Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS Grid Column Context History Tutorial<\/p><\/div>\n<p>With web applications, two words are often intertwined &#8230;<\/p>\n<ul>\n<li>context &#8230; and &#8230;<\/li>\n<li>history<\/li>\n<\/ul>\n<p> &#8230; because the state of a webpage can sometimes only be fully appreciated by how it got to be like that, or its &#8220;history&#8221; in &#8220;context&#8221;.  Another word might be &#8220;order&#8221; because unlike the <a target=_blank title='Commutative' href='https:\/\/www.google.com\/search?q=commutative&#038;rlz=1C5CHFA_enAU973AU973&#038;sxsrf=ALiCzsY-rv_CisR0O4_yMwASSg_0mzIH3g%3A1659850166495&#038;ei=tk3vYpDdHcSPseMP7oGKsA4&#038;ved=0ahUKEwiQkLfc_7P5AhXER2wGHe6AAuYQ4dUDCA4&#038;uact=5&#038;oq=commutative&#038;gs_lcp=Cgdnd3Mtd2l6EAMyBAgAEEMyBAgAEEMyBwgAELEDEEMyCAgAELEDEJECMgQIABBDMgUIABCRAjIFCAAQgAQyBQgAEIAEMgUIABCABDIFCAAQgAQ6BwgAEEcQsAM6BwgAELADEEM6BAgjECc6CggAELEDEIMBEEM6CAgAELEDEIMBOgsIABCABBCxAxCDAToLCC4QgAQQxwEQ0QM6CwguEIAEELEDENQCOggIABCABBCxA0oECEEYAEoECEYYAFCTBFi2HGC3H2gBcAF4AIAB1gGIAZ4OkgEGMC4xMC4xmAEAoAEByAEKwAEB&#038;sclient=gws-wiz'>commutative<\/a> flexibility of multiplication and addition, in Mathematics, the &#8220;order matters&#8221; nature of division and subtraction is what it is like with our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/div_grid_rearrange.html--GETME\" title=\"div_grid_rearrange.html\">current and changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/div_grid_rearrange.html--GETME\" title=\"div_grid_rearrange.html\">div_grid_rearrange.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/div_grid_rearrange.html\">&#8220;proof of concept&#8221; CSS grid-column<\/a> tester you can <a href='#myifgp' title='Try below'>try below<\/a>, which we think would benefit from &#8230;<\/p>\n<ul>\n<li>the &#8220;showing of history&#8221; in its order and context &#8230; in a &#8230;<\/li>\n<li>table element with one (tr) row and as many (td) cells as necessary &#8230; initially &#8230;<br \/>\n<code><br \/>\n&lt;table id=thistory style='display:none;' border=5&gt;&lt;tr id=trone&gt;&lt;\/tr&gt;&lt;\/table&gt;<br \/>\n<\/code><br \/>\n &#8230; the &#8230;<\/li>\n<li>visibility of which is controlled by the user via a new (input type=) checkbox element<\/li>\n<\/ul>\n<p> &#8230; building on the animations of yesterday&#8217;s <a title='CSS Grid Column Animation Tutorial' href='#cssgcat'>CSS Grid Column Animation Tutorial<\/a> and helped out via some <font color=blue>new Javascript code<\/font> as per &#8230;<\/p>\n<p><code><br \/>\n<font color=blue>var snapshotcnt=0;<br \/>\nvar lastsd='', thissd='';<br \/>\n<br \/>\nfunction postpostld() {<br \/>\n   document.getElementById('myh1').innerHTML='&lt;sp' + 'an' + document.getElementById('myh1').innerHTML.split('&lt;sp' + 'an')[1];<br \/>\n   top.location.href='#myh1';<br \/>\n}<br \/>\n<br \/>\nfunction postld() {<br \/>\n   if (window === top) {<br \/>\n   thissd=thissd;<br \/>\n   } else if (top.document.URL.indexOf('\/div_grid_rearrange.htm') != -1) {<br \/>\n   document.getElementById('thistory').style.display='none';<br \/>\n   \/\/ mybut goes here<br \/>\n   setTimeout(postpostld, 6000); \/\/top.location.href='#myh1';<br \/>\n   }<br \/>\n}<br \/>\n<\/font><br \/>\nfunction onl() {<br \/>\n   one=Math.max(1,Math.min(eval(-1 + eval('' + document.getElementsByTagName('div').length)),Math.floor(Math.random() * eval(-1 + eval('' + document.getElementsByTagName('div').length)))));<br \/>\n   rto='' + Math.max(1,Math.floor(Math.random() * 4)) + ' \/ span ' + Math.max(1,Math.floor(Math.random() * 4));<br \/>\n   <font color=blue>if (window === top) {<br \/>\n   thissd='&lt;html&gt;' + document.head.outerHTML + '&lt;body onload=\"onl(); document.getElementById(' + \"'\" + 'thistory' + \"'\" + ').style.display=' + \"'\" + 'none' + \"'\" + '; document.getElementById(' + \"'\" + 'mybut' + \"'\" + ').scrollIntoView();\"&gt;' + document.body.innerHTML + '&lt;\/body&gt;&lt;\/html&gt;';<br \/>\n   if (thissd != lastsd) {<br \/>\n   snapshotcnt++;<br \/>\n   document.getElementById('trone').innerHTML+='&lt;td id=td' + snapshotcnt + '&gt;&lt;iframe style=\"width:100%;height:100%;\" id=if' + snapshotcnt + ' srcdoc=\"\"' + '&gt;&lt;\/iframe&gt;&lt;\/td&gt;';<br \/>\n   lastsd='&lt;html&gt;' + document.head.outerHTML + '&lt;body onload=\"onl(); document.getElementById(' + \"'\" + 'mybut' + \"'\" + ').scrollIntoView();\"&gt;' + document.body.innerHTML + '&lt;\/body&gt;&lt;\/html&gt;';<br \/>\n   if (snapshotcnt == 1) {<br \/>\n   \/\/if (lastsd.indexOf(\"&gt;\" + \"&lt;\/span&gt;\") != -1) { alert('Here ' + \"&gt;Move item1 to be 1 \/ span 2&lt;\/span&gt; \" + lastsd.replace(\"&gt;\" + \"&lt;\/span&gt;\", \"&gt;Move item1 to be 1 \/ span 2&lt;\/span&gt;\").split('&lt;\/h' + '1&gt;')[0].slice(-100)); }<br \/>\n   document.getElementById('if' + snapshotcnt).srcdoc=lastsd.replace(\"\/\" + \"\/ mybut goes here\", \"document.getElementById('mybut').innerHTML='Move item\" + one + \" to be \" + rto + \"';\").replace(\"&gt;\" + \"&lt;\/span&gt;\", \"&gt;Move item1 to be 1 \/ span 2&lt;\/span&gt;\").replace('#2' + '19' + '6F3', '#9621F3');<br \/>\n   } else {<br \/>\n   document.getElementById('if' + snapshotcnt).srcdoc=lastsd.replace(\"\/\" + \"\/ mybut goes here\", \"document.getElementById('mybut').innerHTML='Move item\" + one + \" to be \" + rto + \"';\").replace(\"&gt;\" + \"&lt;\/span&gt;\", \"&gt;\" + document.getElementById('mybut').innerHTML + \"&lt;\/span&gt;\").replace('#2' + '19' + '6F3', '#9621F3');<br \/>\n   }<br \/>\n   }<br \/>\n   }<br \/>\n   if (window === top) {<br \/>\n   document.getElementById(\"mybut\").innerHTML='Move item' + one + ' to be ' + rto;<br \/>\n   } else if (top.document.URL.indexOf('\/div_grid_rearrange.htm') == -1) {<\/font><br \/>\n   document.getElementById(\"mybut\").innerHTML='Move item' + one + ' to be ' + rto;<br \/>\n   <font color=blue>document.getElementById(\"cbsh\").style.visibility='hidden'; \/\/.readOnly=true;<br \/>\n   }<\/font><br \/>\n}<br \/>\n<font color=blue><br \/>\nsetTimeout(postld, 3000);<\/font><br \/>\n<\/code><\/p>\n<p> &#8230; and representing user experience improvements here with the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/div_grid_rearrange.html\" title=\"Click picture\">CSS grid-column tester web application<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/css-grid-column-context-history-tutorial\/'>CSS Grid Column Context History Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cssgcat'>Previous relevant <a target=_blank title='CSS Grid Column Animation Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/css-grid-column-animation-tutorial\/'>CSS Grid Column Animation Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/div_grid_rearrange.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS Row Gap Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/div_grid_rearrange_animations.jpg\" title=\"CSS Row Gap Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS Grid Column Animation Tutorial<\/p><\/div>\n<p>CSS <a target=_blank title='CSS @keyframes rule information from W3schools' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_animation-keyframes.asp'>@keyframes rule<\/a> animations can add &#8220;pizazz&#8221; to your webpages.  And, because yesterday&#8217;s <a title='CSS Grid Column Primer Tutorial' href='#cssgcpt'>CSS Grid Column Primer Tutorial<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/div_grid_rearrange.html\">web application<\/a>&#8216;s actions could take place in the blink of an eye before registering &#8220;what just happened&#8221; for the user, we offer optional &#8220;pizazz&#8221; as of today.  It&#8217;s amazing what CSS properties you can animate, and you can do more than one property at a time doing it!  Using a second property can help clarify an explanation, as we think we are improving with the <font color=blue>animation related Javascript function logic<\/font> below &#8230;<\/p>\n<p><code><br \/>\nfunction myFunction() {<br \/>\n  <font color=blue>if (document.getElementById('cbanima').checked) {<br \/>\n     mmcnt++;<br \/>\n     if (('' + document.getElementById(\"myDIV\" + one).style.gridColumn) == '') {<br \/>\n     document.getElementById('anima').innerHTML+='&lt;style&gt;  #' + \"myDIV\" + one + ' {  animation: mymove' + mmcnt + ' 2s 2; } @keyframes mymove' + mmcnt + ' { from {grid-column: ' + was[eval('' + one)] + '; background-color: rgba(255, 255, 255, 0.2);} to {grid-column: ' + rto + '; background-color: rgba(255, 255, 255, 0.8);} } &lt;\/style&gt;';<br \/>\n     } else {<br \/>\n     document.getElementById('anima').innerHTML+='&lt;style&gt;  #' + \"myDIV\" + one + ' {  animation: mymove' + mmcnt + ' 2s 2; } @keyframes mymove' + mmcnt + ' { from {grid-column: ' + ('' + document.getElementById(\"myDIV\" + one).style.gridColumn) + '; background-color: rgba(255, 255, 255, 0.2);} to {grid-column: ' + rto + '; background-color: rgba(255, 255, 255, 0.8);} } &lt;\/style&gt;';<br \/>\n     }<br \/>\n     setTimeout(postonl, 2200);<br \/>\n  } else {<\/font><br \/>\n  document.getElementById(\"myDIV\" + one).style.gridColumn = rto;<br \/>\n  if (document.getElementById(\"mysel\").innerHTML == '') {<br \/>\n    document.getElementById(\"mysel\").innerHTML+='&lt;option value=\"\"&gt;Please review and\/or replay movements&lt;\/option&gt;';<br \/>\n  }<br \/>\n  document.getElementById(\"mysel\").innerHTML+='&lt;option value=\"' + one + ':' + rto + '\"&gt;' + document.getElementById(\"mybut\").innerHTML + '&lt;\/option&gt;';<br \/>\n  onl();<br \/>\n  <font color=blue>}<\/font><br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; applying &#8220;on the fly&#8221; dynamic CSS styling to <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/div_grid_rearrange.html-GETME\" title=\"div_grid_rearrange.html\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/div_grid_rearrange.html-GETME\" title=\"div_grid_rearrange.html\">div_grid_rearrange.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/div_grid_rearrange.html\">&#8220;proof of concept&#8221; CSS grid-column<\/a> tester <a href='#myifgp' title='Try below'>below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/css-grid-column-animation-tutorial\/'>CSS Grid Column Animation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cssgcpt'>Previous relevant <a target=_blank title='CSS Grid Column Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/css-grid-column-primer-tutorial\/'>CSS Grid Column Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/div_grid_rearrange.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS Row Gap Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/div_grid_rearrange.jpg\" title=\"CSS Row Gap Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS Grid Column Primer Tutorial<\/p><\/div>\n<p>Continuing on with the theme of &#8220;HTML div element looking like an HTML table element&#8221; regarding a &#8220;grid look&#8221;, onto yesterday&#8217;s <a title='CSS Row Gap Primer Tutorial' href='#cssrgpt'>CSS Row Gap Primer Tutorial<\/a> start, today we turn our attention to the CSS <a target=_blank title='CSS grid-column property information from W3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_grid-column.asp'>&#8220;grid-column&#8221; property<\/a> &#8230;<\/p>\n<blockquote cite='\/\/www.w3schools.com\/cssref\/pr_grid-column.asp'><p>\nThe grid-column property specifies a grid item&#8217;s size and location in a grid layout, and is a shorthand property for the following properties:<br \/>\n<br \/>\ngrid-column-start<br \/>\ngrid-column-end\n<\/p><\/blockquote>\n<p>Why the interest?  Well, we&#8217;d reference <a target=_blank title='CSS Row Gap Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/css-row-gap-primer-tutorial\/'>yesterday&#8217;s tutorial<\/a> here &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/css-row-gap-primer-tutorial\/'>\n<p>And yes, HTML div is more favoured than HTML table regarding <a target=_blank title='Responsive design' href='https:\/\/www.w3schools.com\/html\/html_responsive.asp'>responsive design<\/a>.<\/p>\n<\/blockquote>\n<p> &#8230; as an &#8220;interest point&#8221;, at least for us.  In &#8220;table talk&#8221; these are a bit like <a target=_blank title='Table td cell rowspan and colspan information from W3schools' href='https:\/\/www.w3schools.com\/html\/html_table_colspan_rowspan.asp'>&#8220;colspan&#8221; and &#8220;rowspan&#8221;<\/a>.<\/p>\n<p>In assembling today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/div_grid_rearrange.html_GETME\" title=\"div_grid_rearrange.html\">&#8220;proof of concept&#8221; css_row_gap_usage.html<\/a> HTML\/CSS parts of the design, we add a little Javascript to with the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/div_grid_rearrange.html\" title=\"Click picture\">web application<\/a> we thank <a target=_blank title='Tryit Editor v3.7 regarding CSS grid-column' href='https:\/\/www.w3schools.com\/cssref\/tryit.asp?filename=trycss_grid-column'>as a major code source of inspiration<\/a>, thanks.<\/p>\n<p>Want to see what we mean?<\/p>\n<p><iframe id=myifgp src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/div_grid_rearrange.html' style='width:100%;height:905px;'><\/iframe><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/css-row-gap-primer-tutorial\/'>CSS Row Gap Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cssrgpt'>Previous relevant <a target=_blank title='CSS Row Gap Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/css-row-gap-primer-tutorial\/'>CSS Row Gap Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css_row_gap_usage.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS Row Gap Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css_row_gap_usage.jpg\" title=\"CSS Row Gap Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS Row Gap Primer Tutorial<\/p><\/div>\n<p>Yes, an HTML div element innerHTML content can be organized like an HTML table in a &#8220;grid&#8221; like way via CSS like &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\ndiv.grid-container {<br \/>\n  display: grid;<br \/>\n  row-gap: 50px;<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; thanks to <a target=_blank title='https:\/\/www.w3schools.com\/cssref\/tryit.asp?filename=trycss3_row-gap' href='\/\/www.w3schools.com\/cssref\/tryit.asp?filename=trycss3_row-gap'>https:\/\/www.w3schools.com\/cssref\/tryit.asp?filename=trycss3_row-gap<\/a> here, too!<\/p>\n<p>And yes, HTML div is more favoured than HTML table regarding <a target=_blank title='Responsive design' href='https:\/\/www.w3schools.com\/html\/html_responsive.asp'>responsive design<\/a>.<\/p>\n<p>And so, yes, we thought you might be interested in our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css_row_gap_usage.html_GETME\">proof of concept css_row_gap_usage.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css_row_gap_usage.html\" title=\"Click picture\">web application<\/a> trying to fit some <font size=1>sub<\/font>div into <a target=_blank title='window.innerHeight vs ...' href='https:\/\/www.google.com\/search?q=innerheight+vs+outerheight&#038;rlz=1C5CHFA_enAU973AU973&#038;oq=innerHeight&#038;aqs=chrome.0.69i59j69i57j0i512l2j0i20i263i512j0i512l5.3273j0j4&#038;sourceid=chrome&#038;ie=UTF-8'>window.innerHeight<\/a> &#8220;real estate&#8221;.<\/p>\n<p>And &#8230;<\/p>\n<blockquote cite='https:\/\/www.youtube.com\/watch?v=iRlqmTKyQx0'><p>\n<a target=_blank title='No No No No N No Yes!' href='https:\/\/www.youtube.com\/watch?v=iRlqmTKyQx0'>No No No No N No Yes!<\/a>\n<\/p><\/blockquote>\n<p> &#8230; we think you could also try this out for yourself, below &#8230;<\/p>\n<p><iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css_row_gap_usage.html' style='width:100%;height:905px;'><\/iframe><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d56552' onclick='var dv=document.getElementById(\"d56552\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/div\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56552' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d56564' onclick='var dv=document.getElementById(\"d56564\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/column\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56564' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d56572' onclick='var dv=document.getElementById(\"d56572\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/animation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56572' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d56578' onclick='var dv=document.getElementById(\"d56578\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/history\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56578' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>With web applications, two words are often intertwined &#8230; context &#8230; and &#8230; history &#8230; because the state of a webpage can sometimes only be fully appreciated by how it got to be like that, or its &#8220;history&#8221; in &#8220;context&#8221;. &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-grid-column-context-history-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,12,14,37],"tags":[84,1580,202,2388,230,4054,2105,281,342,4053,566,576,675,2076,997,2232,2644,1991,1075,2389,1209,1212,1238,1319,1350,1356],"class_list":["post-56578","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-event-driven-programming","category-tutorials","tag-animation-2","tag-cell","tag-checkbox","tag-colspan","tag-column","tag-commutative","tag-context","tag-css","tag-div","tag-grid-column","tag-history","tag-html","tag-keyframes","tag-order","tag-programming","tag-property","tag-responsive","tag-responsive-design","tag-row","tag-rowspan","tag-style","tag-styling","tag-table","tag-tutorial","tag-user-experience","tag-ux"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56578"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=56578"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56578\/revisions"}],"predecessor-version":[{"id":56588,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56578\/revisions\/56588"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=56578"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=56578"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=56578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}