{"id":74932,"date":"2026-10-09T03:01:00","date_gmt":"2026-10-08T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=74932"},"modified":"2026-10-07T13:04:05","modified_gmt":"2026-10-07T03:04:05","slug":"list-to-grid-layout-css-media-query-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/list-to-grid-layout-css-media-query-tutorial\/","title":{"rendered":"List to Grid Layout CSS Media Query Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/grid_fitting_in_media_queries.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"List to Grid Layout CSS Media Query Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/grid_fitting_in_media_queries.jpg\" title=\"List to Grid Layout CSS Media Query Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">List to Grid Layout CSS Media Query Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='List to Grid Layout Primer Tutorial' href='#lglpt'>List to Grid Layout Primer Tutorial<\/a> <a target=\"_blank\" title='W3schools help' href='https:\/\/www.w3schools.com\/css\/tryit.asp?filename=trycss_grid_12columnresponsive' rel=\"noopener\">another W3schools webpage<\/a> helped us, enormously, go a bit further with this &#8220;Grid Layout&#8221; theme, and add into the mix &#8230;<\/p>\n<ul>\n<li>CSS Media Query design<\/li>\n<li>&#8220;a&#8221; link navigation &#8230; occasionally to &#8230;<\/li>\n<li><a target=\"_blank\" title='YouTube' href='https:\/\/youtube.com' rel=\"noopener\">YouTube<\/a> Embedded iframe based content &#8230; or to popup window URLs &#8230; perhaps via &#8230;<\/li>\n<li>hashtagged details within a user&#8217;s CSV entered list<\/li>\n<\/ul>\n<p> &#8230; in a <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/grid_fitting_in_media_queries.html_GETME\" rel=\"noopener\">grid_fitting_in_media_queries.html<\/a>&#8216;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/grid_fitting_in_media_queries.html\" rel=\"noopener\">Months Grid with CSS Media Query Layout<\/a> web application you can also try below &#8230;<\/p>\n<p><iframe style=\"width:99%;height:800px;\" src=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/grid_fitting_in_media_queries.html#September\"><\/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\/list-to-grid-layout-css-media-query-tutorial\/' rel=\"noopener\">List to Grid Layout CSS Media Query Tutorial<\/a>.<\/p-->\n<hr>\n<p id='lglpt'>Previous relevant <a target=\"_blank\" title='List to Grid Layout Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/list-to-grid-layout-primer-tutorial\/' rel=\"noopener\">List to Grid Layout 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\/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<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='#d74932' onclick='var dv=document.getElementById(\"d74932\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/responsive\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d74932' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Onto yesterday&#8217;s List to Grid Layout Primer Tutorial another W3schools webpage helped us, enormously, go a bit further with this &#8220;Grid Layout&#8221; theme, and add into the mix &#8230; CSS Media Query design &#8220;a&#8221; link navigation &#8230; occasionally to &#8230; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/list-to-grid-layout-css-media-query-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,14,37],"tags":[3533,2531,281,283,290,2276,2147,2298,576,4446,710,5715,980,997,2644,1991,1185,1238,1319,3048],"class_list":["post-74932","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","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-media-query","tag-presentation","tag-programming","tag-responsive","tag-responsive-design","tag-spreadsheet","tag-table","tag-tutorial","tag-w3schools"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/74932"}],"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=74932"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/74932\/revisions"}],"predecessor-version":[{"id":74939,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/74932\/revisions\/74939"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=74932"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=74932"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=74932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}