Relearn CSS layout
There is more than way to do all of these layouts. I don&#x27;t have time to learn all of them, I just want my content to look great on all devices. I also want to stick to the specifications of HTML as it applies to all the browsers that do HTML5 - so no Internet Explorer. Sticking to the specs means no hacks and the likelihood that someone can make sense of my code in ten years time and not think &#x27;why did they do this?&#x27;.<p>For this reason I will be sticking with CSS Grid. CSS Grid is supported in all HTML5 browsers, so that means everything except the depreciated Internet Explorer.<p>To get my CSS Grid versions to work I will also be using CSS Variables defined in media queries to make things responsive. I don&#x27;t need to have lots of fixed breakpoints as I use fonts that scale in such a way that lines don&#x27;t get too long to read on really big screens.<p>For the CSS variables I have fallbacks which are the desktop defaults. So although &#x27;mobile first&#x27; I can get a deluxe mobile experience but code for desktop in the first instance.<p>With pseudo classes I can add icons, usually Unicode symbols or SVG, SVG defined in CSS variables.<p>Since I can do this with CSS Grid and only have Internet Explorer be &#x27;of concern&#x27;, I can write HTML5 with no superfluous markup. That means no div, span or even class attributes. I have got out of the mindset of using container wrappers for content and just putting neat content where it needs to go using CSS Grid.<p>You could look at my HTML and think I had just swapped the div for article, aside and section. Or for figure. Or for main, header and footer. But that is not the case, I find that if I am using the right elements and pay attention to the structure of my content it just naturally styles itself with CSS Grid, no additional markup needed.<p>Also not needed are clever things with calc. If I find myself doing that then it is a sign that I have got it wrong and that there is a simpler solution I have overlooked. I also rarely use pixels. It is ems or viewer units all the way, again no need to think of what a pixel actually is.<p>I find that writing HTML and styling it without the hacks makes my code pretty alien compared to how the rest of the world is doing it. Anyone can make stuff complicated for reasons of backward compatibility, keeping it concise and simple is a different craft.<p>For the above reasons I am disappointed by these layout modules, a lot of work has gone into it but at times we need to question what we take for granted. Everything is a div. I look at the examples and see that if, e.g., the image is put in a figure and given a figcaption then the structure is there for it to effortlessly be given layout with CSS Grid, no container elements needed.<p>At some stage we need to stop looking at content as placeholder examples and stop using generic containers.