I design .

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

Experimenting with CSS grid

18 May 2018

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 last.fm's API and Vue.js to build it.

Comment: via Twitter