{"id":74927,"date":"2026-10-08T03:01:00","date_gmt":"2026-10-07T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=74927"},"modified":"2026-10-07T13:03:47","modified_gmt":"2026-10-07T03:03:47","slug":"list-to-grid-layout-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/list-to-grid-layout-primer-tutorial\/","title":{"rendered":"List to Grid Layout Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/grid_fitting_in.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"List to Grid Layout Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/grid_fitting_in.gif\" title=\"List to Grid Layout Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">List to Grid Layout Primer Tutorial<\/p><\/div>\n<p>Thanks to <a target=\"_blank\" title='W3schools help' href='https:\/\/www.w3schools.com\/css\/tryit.asp?filename=trycss_grid' rel=\"noopener\">this useful W3schools link<\/a>&#8216;s inspiration we&#8217;re embarking on a project where &#8230;<\/p>\n<ul>\n<li>any concept <font size=1>(as is often referred to as CSV data or, perhaps, spreadsheet data)<\/font> of a list &#8230; can be presented &#8230;<\/li>\n<li>in a grid <font size=1>(or what many people think of as a <i>tabular<\/i> layout)<\/font><\/li>\n<\/ul>\n<p> &#8230; is the focus.<\/p>\n<p>But unlike using the HTML <i>table<\/i> element thinking, though, accounting for where a row of a table begins and ends, with a <i>grid<\/i> layout thinking, to our minds, the (list) data reigns supreme, and the grid layout makes it fit in the way you&#8217;ve coded the grid CSS to work.<\/p>\n<p>This, undoubtedly, will appeal to HTML coders just wanting to neatly present a list in an interesting way.  As such, with our tweaks to the <a target=\"_blank\" title='W3schools help' href='https:\/\/www.w3schools.com\/css\/tryit.asp?filename=trycss_grid' rel=\"noopener\">W3schools<\/a> CSS brilliance, thanks, is to allow the user to change the (list) data from our default list of month names to whatever they want, in a <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/grid_fitting_in.html_GETME\" rel=\"noopener\">proof of concept<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/grid_fitting_in.html\" rel=\"noopener\">Months Grid Layout<\/a> web application you can also try below &#8230;<\/p>\n<p><iframe style=\"width:95%;height:800px;\" src=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/grid_fitting_in.html\"><\/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='#d74927' onclick='var dv=document.getElementById(\"d74927\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/grid\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d74927' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Thanks to this useful W3schools link&#8216;s inspiration we&#8217;re embarking on a project where &#8230; any concept (as is often referred to as CSV data or, perhaps, spreadsheet data) of a list &#8230; can be presented &#8230; in a grid (or &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/list-to-grid-layout-primer-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":[12,37],"tags":[3533,2531,281,283,290,2276,2147,2298,576,4446,710,980,997,1185,1238,1319,3048],"class_list":["post-74927","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-comma","tag-comma-separated-values","tag-css","tag-csv","tag-data","tag-delimitation","tag-delimiter","tag-grid","tag-html","tag-layout","tag-list","tag-presentation","tag-programming","tag-spreadsheet","tag-table","tag-tutorial","tag-w3schools"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/74927"}],"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=74927"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/74927\/revisions"}],"predecessor-version":[{"id":74938,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/74927\/revisions\/74938"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=74927"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=74927"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=74927"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}