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:
https://codepen.io/ketanmistry/full/LmXwaq/
And for those curious ones, I used last.fm’s API and Vue.js to build it.