The Current State of CSS Grids

…and what to use today.

Today, Microsoft announced that as of Windows 10 build 16226, the Edge browser has added support for CSS Grid Layout (behind the “Enable unprefixed CSS Grid Layout support” flag).

To their credit, Microsoft played a major part in publishing the first draft of the CSS Grid Layout specification and introduced an early prefixed version in Internet Explorer 10. However, since then, they’ve been slow to update as the specification evolved. So while all the other major browsers have now implemented the latest specifications, IE10, IE11, and Edge have all remained stuck on the older, prefixed syntax.

Today’s announcement is great news and means that we’ll soon have full, modern cross-browser support for the latest version of the CSS Grid Layout specification (assuming you don’t have to support Internet Explorer).

However, since we’re not quite there yet, you may need to fall back to using a grid system in the meantime. Currently, those fall into two categories: HTML grid systems and CSS grid systems.

The following article (another one from Zell Liew) helps explain the difference between them and why one is better than the other. Don’t worry about the specific frameworks mentioned, but pay attention to the message.

In summary, if you’re currently using a DOM bloating HTML grid system like Bootstrap or Gridlex, please stop. It’s time to change your thinking about how layouts are defined. Moving to a CSS grid system now will help you transition to using CSS Grid Layouts in the very near future.

Show your support

Clapping shows how much you appreciated Andy Couch’s story.