CSS Grid changes everything [video]

I giggle a little bit inside when web designers say &quot;We shouldn&#x27;t use meaningless tags that exist only for layout. We should use semantic ones, like &lt;header&gt; and &lt;footer&gt;!&quot;. Except that, uh, &quot;header&quot; and &quot;footer&quot; <i>themselves</i> are layout terms. They&#x27;re just a metaphor for a document as a body (&quot;&lt;body&gt;&quot;) with the head at the top and the feet at the bottom. It&#x27;s not like the contents of a &lt;footer&gt; tag have anything to do with feet. We call it &quot;semantic&quot; simply because the metaphor is old enough that we&#x27;ve internalized it and no longer see it.<p>Not that I think this detracts from the talk at all. Fewer, cleaner tags is good, regardless of how they&#x27;re spelled.

If you need to support IE 10, 11, or Edge then Grid is broken. Microsoft&#x27;s browsers follow an older spec than Chrome&#x2F;Safari&#x2F;Firefox. Microsoft are going to fix Grid in Edge 17, but no release date yet.<p>Unfortunately this is my life right now. When Chrome and Firefox dropped support for NPAPI a lot of enterprise customers intentionally moved their users back to IE 11. The loss of NPAPI has ironically increased IE 11&#x27;s market-share, talk about unintended consequences...<p>I understand why they didn&#x27;t but part of me wishes Microsoft had enabled NPAPI in Edge just so we&#x27;d at least get modern web standards even if NPAPI is bad and insecure. Instead IE 11&#x27;s life is now another five years at minimal or until the last Java Applet, ActiveX control, or Flash page disappears.<p><a href="https:&#x2F;&#x2F;caniuse.com&#x2F;#feat=css-grid" rel="nofollow">https:&#x2F;&#x2F;caniuse.com&#x2F;#feat=css-grid</a>

Jen Simmons and Rachel Andrew have done really great work on making CSS Grid sensible to comprehend. I cannot recommend their resources enough.<p>- <a href="http:&#x2F;&#x2F;labs.jensimmons.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;labs.jensimmons.com&#x2F;</a><p>- <a href="https:&#x2F;&#x2F;gridbyexample.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;gridbyexample.com&#x2F;</a>

I worked with CSS Grids back in 2010 when I was working on a Windows 8 app. Since then I hated any other constraint resolver including Box Model, iOS Auto Layout and Flexbox model.<p>CSS Grid is so intuitive you forget how difficult this problem has been in the history of UI engineering

The Wes Bos course on CSS Grid is free and excellent. Check it out: <a href="https:&#x2F;&#x2F;cssgrid.io&#x2F;" rel="nofollow">https:&#x2F;&#x2F;cssgrid.io&#x2F;</a>

I wonder if I&#x27;m alone in the opinion that whatever method is used to create a complex layout, the method needs to be Turing Complete. I can understand the appeal of being able to create some tags and not having to worry about what happens after that, but you really only end up with a good design if you&#x27;re just trying to do something simple. We often see people so devoted to the idea of CSS they end up with something incredibly complicated that could have been done in just a handful of lines of code.<p>edit: Fixed spelling of &quot;Touring&quot;

As someone who recently converted to using CSS grid for my company, I can&#x27;t imagine going back. It really reduces the mental overhead when building complex layouts and has made my code shorter and easier to understand.

It&#x27;s funny, as six month ago I wasn&#x27;t very fond of the whole &quot;Grid is ready today&quot; talk with ~65% of browsers supporting it. But actually I am glad that within 6 month that percentage seems to have risen by another 10% so that we have ~75% today: <a href="https:&#x2F;&#x2F;caniuse.com&#x2F;#feat=css-grid" rel="nofollow">https:&#x2F;&#x2F;caniuse.com&#x2F;#feat=css-grid</a><p>And when you take a closer look to the numbers you can see that in another 6 to 12 month the technology should be practically out there in every browser, as the few who will still not have it, will be some mobile browsers which will use the mobile first baseline variant anyway, if you follow the recommendations from the video.<p>Pretty cool stuff.

Tables. They&#x27;re back!

Any idea why the grid is 1-indexed instead of 0-indexed?

It looks like Bootstrap could be reduced to a pure UI component framework now.

Have yet to dive in to CSS Grids and this really made it clear what pain it is solving. I&#x27;m super excited to start using this!<p>Also kudos to the speaker, Morten Rand-Hendriksen, that was a very enjoyable presentation!

The first part of this video totally highlighted all the frustrations I&#x27;ve had with CSS. Super excited to try this on my project.

Is there a good pollyfill for older browsers?

Reminds me of GridBagLayout in Java Swing. Can anyone here who has experience with both confirm this?