Get a FREE Shopify Website Audit Find out more
I design .

I'm Ketan ‐ A Melbourne web designer and developer
with over 20 years of industry experience.

Head icon.

Experimenting with CSS grid

← Blog

If you’re into front-end design and development then you would have no doubt heard about CSS grid which enables much more flexible layouts for web pages.

In a nutshell, creating a grid is a simple as adding three lines of css to the container:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  grid-gap: 30px;

There’s no longer any need for floating elements or calculating margins and paddings or css nth-childs. CSS grid keeps things simple, but flexible.

I’ve finally had the chance to have a play around with it and have created an extremely simple example:

And for those curious ones, I used’s API and Vue.js to build it.