Responsive Grid Layout w/ Card Design for WordPress Archive & Category Pages (pure CSS)

Transform your boring category page into a beautiful grid layout and card templates for your posts. All it takes is a few lines of CSS and the magic of CSS Grid.

▸▸ 👨‍💻 Get the CSS code used in the video

▸▸ Learn to use Chrome DevTools Inspector:

📦 More WordPress CSS Tutorials

▸▸Learn CSS Grid (resources)

In this video, you'll learn how to harness the power of CSS grid and quickly build an auto-resizing grid layout for your WordPress archives, categories, or blog page.

We'll use the amazing minmax property along with auto-fit/auto-fill to make sure it can hold an unlimited number of child elements in the grid. It will also resize (reduce or increase the number of columns) to automatically fit the screen or parent container.

** Chapters **
0:00 - What we're building
0:27 - Before (default category template)
0:59 - Finding the right CSS selectors to use
2:18 - Creating the post Grid
4:35 - Make 1st grid item full-width
5:44 - Make cards equal-height (generatepress fix)
6:36 - Tweaking the Grid layout
7:12 - Make grid apply to blog page
8:17 - Creating the article card design
9:55 - Image Aspect Ratio
12:37 - Card grid layout and card footer
16:09 - Adding hover effects
20:17 - What to build next

#cssgrid #wordpress #css

[Simulacra]

Fantastic video! Very well explained and at just the right pace.

My site looks blog & archive pages look so much better after implementing most of these changes.

Only thing missing here is that it would have been nice to learn how to link the entire card as a link to the post as opposed to still having to click on either the title/image.

You earned a sub from me and I look forward to watching some of your other content.

[thismoment]

Wow! A cut above so many other tutorials! Bravo and thank you so much. I'll be coming back 👍🙏

[samchat]

Great content. Will have to work on my site, searching for such a solution for quite some time. Thanks for sharing this.

[ehabomar]

Great job. Thanks a lot for your efforts🌹🌹🌹

[roppor]

You are a great Guy and a great WordPress blogger 👌

[jessekay]

Awesome tutorial! Thank you so so much, you are a legend!

[mehmet]

A wonderful tutorial. Thank you very much. An interesting thing happened when I applied the {height:100%; grid-template-rows: auto 1fr auto auto} The last item on the row was taller than the previous ones as if it had a padding-bottom value

[rhythmbox]

please make a more videos css in wordpress.

[spitsparrow]

there. is grid block in core Wordpress now. Can you do a tutorial for it ?

[demasmoha]

Can we please get this css that you've used here. I'm also using generepress at the moment and I would love to have this design on my site. Mind blowing thanks

[arunkumargudise]

Aswome video and 1 more thing to do how align readmore button to at bottom and right side of meta please can you do a video

[sounakchatterjee]

Great video mate!
These are the kind of videos I was looking for sooo long....
I watched your other videos about animated button they were great...

One question though... You showed us how to register the button with the code... I was wondering is there a way to create some animated buttons and save it as presets...

Also, i would request you to make a video showing how to decorate the text links site wide and also save them as presets so next time if I want I can simply select that specific design... 🙂

[itspraveensharma]

Man ... This is so so so damn Also to suggest ideas for future about if you customise this card design even further where you are displaying multiple elements facing each other like in holiday package websites...so much information organized in limited space....that would be awesome to

[iUmarFarooqi]

Thanks for this one, Matt.

Are you still planning to do that whole website or blog design from scratch?

[groomersking]

I loved the tutorial and subscribed to your LOL channel. I have a question, is it possible to make the entire card clickable? Only the image and the text will direct you to the post, but is it possible that the full body of the card would direct you to the post just like the image and the text?
Greetings in Advance

[Pendergeist]

Hi Matt, I'm running into an issue where my archive articles are already in a column of their own:
<ul class = "container columns-1">

and the grid that I create using your tutorial treats the entire large column as 1 "article" in the grid. Any tips on how to break them up?

[roppor]

Please, more tricks, thanks to your video, I am not beginning to understand much how to work with the code inspector, and element classes, for me this is a problem. I'm also interested in learning how to add ready-made templates such as a custom menu, custom header and footer ...

[iUmarFarooqi]

Also, do you have any idea how I can add Infinite Scroll to any website? If the theme doesn't support it natively.

[Infonixelearn]

BROTHER IT IS NOT WORKING ON MY Genratepress Theme please Guide me and Heading is above on Feature image.

[rithin]

How to create single post list like Backlinko site in generate press