{"id":56564,"date":"2022-08-06T03:01:49","date_gmt":"2022-08-05T17:01:49","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=56564"},"modified":"2022-08-07T09:11:02","modified_gmt":"2022-08-06T23:11:02","slug":"css-grid-column-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-grid-column-primer-tutorial\/","title":{"rendered":"CSS Grid Column Primer Tutorial"},"content":{"rendered":"
\"CSS<\/a>

CSS Grid Column Primer Tutorial<\/p><\/div>\n

Continuing on with the theme of “HTML div element looking like an HTML table element” regarding a “grid look”, onto yesterday’s CSS Row Gap Primer Tutorial<\/a> start, today we turn our attention to the CSS “grid-column” property<\/a> …<\/p>\n

\nThe grid-column property specifies a grid item’s size and location in a grid layout, and is a shorthand property for the following properties:
\n
\ngrid-column-start
\ngrid-column-end\n<\/p><\/blockquote>\n

Why the interest? Well, we’d reference yesterday’s tutorial<\/a> here …<\/p>\n

\n

And yes, HTML div is more favoured than HTML table regarding responsive design<\/a>.<\/p>\n<\/blockquote>\n

… as an “interest point”, at least for us. In “table talk” these are a bit like “colspan” and “rowspan”<\/a>.<\/p>\n

In assembling today’s “proof of concept” css_row_gap_usage.html<\/a> HTML\/CSS parts of the design, we add a little Javascript to with the web application<\/a> we thank as a major code source of inspiration<\/a>, thanks.<\/p>\n

Want to see what we mean?<\/p>\n