CSS Grid, yes you can use it in IE and Vue loves it

The first draft of the CSS Grid Spec was presented at W3C in 2012. In 2017, all major browsers (Chromium, Chrome, Firefox, Opera, Safari, Edge in this order) had support for most of CSS Grid properties. However, it’s 2020 and still we, frontend developers, don’t feel comfortable in using CSS Grid for fear of lack of support.

If you agree with the statement above, I urge you to read this series from CSS Tricks https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/. Even IE supports most of the properties in CSS Grid.

What’s more, the javascript framework you are currently using might even have some nice tricks up their sleeve. Today, I’d like to share with you a story of delight when I found out what Vue.js was doing in a website I was working on with CSS Grid.

First of all, I would just like to start with how refreshingly simple it was to use CSS Grid to compose a custom layout of widgets in Vue; especially when compared to position absolute for example, where you’d need to manually calculate the 4 dimensions in relation to current window width and height.

<template>
  <div
    class="grid-item"
    :style="positionStyles"
  \>
    ...
  </div>
</template>
<script>
  export default {
    ...
    computed: {
      positionStyles () {
        return {
          gridColumn: this.position.x,
          gridColumnSpan: this.position.width,
          gridRow: this.position.y,
          gridRowSpan: this.position.height,
          gridArea: [this.position.y, this.position.x, 'span ' + this.position.height, 'span ' + this.position.width].join(' / ')
        }
      }
    },
    ...
  }
</script>

The gridColumn, gridColumnSpan, gridRow, gridRowSpan are actually not required as the gridArea can define everything needed to place the div in the correct place, but it helps with readability.

As you can see, when running the website in Chrome, Vue actually only adds the grid-area property:

Now, here is the fun part. See what happens when we open the same website on Edge (v18, non-chromium). Vue.js is adding the grid-area property, but it also adds the individual (and prefixed) -ms-grid-<column/row>-span, grid-<column/row>-start and grid-<column/row>-end. So everything appears correctly in the grid #magic.

Full disclosure, I’m using Vue.js with Nuxt.js and Autoprefixer, but this is the default configuration, there is no extra trickery involved here!

As you can see, CSS Grid support might already be included in the tools you are already using, so next time you start a project why not give it a try? Let us know how it goes @whitesmithco

Notes: CSS Grid Chronology based on https://alistapart.com/article/the-story-of-css-grid-from-its-creators/