How to set number of columns with CSS Grid for each viewport?


My site is a blog. On my homepage, I wish for each blog post to be a separate entity, so that when the width decreases, the “The Shelf” title and also each card with an album cover on it move with the width. Basically, on web I want the blog preview section to be 4 cards wide, on tablet 2 cards wide, and on phone 3 cards wide.

I am new to this - many thanks in advance.

Here is my site Read-Only:[ LINK](
(how to share your site Read-Only link)

hi @Freddie_of your request is related to CSS Grid and I have done for you a short video with some additional info.

Hope this will solve your request

EDIT: It seems to be some glitch as this video and all my other videos on this forum doesn’t work. Not sure if this is WF forum issue but I have contacted CleanShot Support team (app that I’m creating and storing all videos) to look into this issue from their site to narrow down where problem can be. Sorry.

Hope that will be fixed in no time for now here link to video download

@stan - First video in your post renders for me.

HI @webdev thanks for update as rendering issue was related to cleanShot app as I’m using their servers for unlimited video storage (pro) and it seem they fixed it. :wink: