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

Рет қаралды 6,792

Күн бұрын

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.
🚀 [FREE TRIAL] Superfast VPS Hosting I use: cwdeal.com/grid
▸▸ 👨‍💻 Get the CSS code used in the video
www.buildthatwebsite.com/vide...
▸▸ Learn to use Chrome DevTools Inspector:
• Chrome DevTools Crash ...
📦 More WordPress CSS Tutorials
Fix squished text on small screens: • Floated/Aligned images...
Custom Comparison Table: • Tablepress: Make a 've...
▸▸Learn CSS Grid (resources)
- Complete Grid Guide: css-tricks.com/snippets/css/c...
- CSS grid in 20 minutes: • Learn CSS Grid in 20 M...
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

Пікірлер: 59

@jessekay5760 2 жыл бұрын

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

@ehabomar2656 Жыл бұрын

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

@thismoment57 2 жыл бұрын

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

@BuildThatWebsite 2 жыл бұрын

Awesome, glad you enjoyed it!

@roppor2194 2 жыл бұрын

You are a great Guy and a great WordPress blogger 👌

@samchat1 Жыл бұрын

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

@bovv8940 11 ай бұрын

Magical

@dvlprsakib9970 2 жыл бұрын

Very Helpfull

@Simulacra001 2 ай бұрын

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.

@1907mehmet 2 жыл бұрын

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

@BuildThatWebsite 2 жыл бұрын

I'd have to see it to figure out what's going on. You code might require some modification for different websites depending on your theme and other global styles.

@sounakchatterjee2694 2 жыл бұрын

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... 🙂

@BuildThatWebsite 2 жыл бұрын

All the animation is just CSS that gets loaded on the front-end. So register your custom button, target your animation rules to the button's CSS selector and you should be good to go. As far as links, I did a video on it already: kzfaq.info/get/bejne/iNWDdad5177Oipc.html I haven't done the follow-up yet with more advanced animations because the video didn't get many views. Hopefully I'll get to in in the next couple months.

@arunkumargudise 2 жыл бұрын

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

@rhythmbox2998 2 жыл бұрын

please make a more videos css in wordpress.

@BuildThatWebsite 2 жыл бұрын

Will do!

@itspraveensharma 2 жыл бұрын

Man ... This is so so so damn helpful.....Thank you...... Also to suggest ideas for future videos......How 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 see.....

@BuildThatWebsite 2 жыл бұрын

I think I know what you mean, but could you share a website that has a good example

@itspraveensharma 2 жыл бұрын

@@BuildThatWebsiteif you go to sotc.in & search for holidays especially on mobile those cards could be fun to design....

@BuildThatWebsite 2 жыл бұрын

Unfortunately you can't pull in a post image as a background using CSS. The best method would be to edit the loop template. If you're using GeneratePress, it's now much easier thanks to the block element: kzfaq.info/get/bejne/Y8CEhLOQsKeWqHk.html You could also possibly hack it together with CSS by setting the outer container for each post card to {postion: relative} and then set the post image to { position: absolute; top:0; left: 0; right: 0; bottom: 0; } And use z-index to pull it behind the rest of the card content.

@iUmarFarooqi 2 жыл бұрын

Thanks for this one, Matt. Are you still planning to do that whole website or blog design from scratch?

@BuildThatWebsite 2 жыл бұрын

Yes definitely. It's a really hard video to make so it's going to take longer than most of my videos. Hopefully it'll be released this month.

@iUmarFarooqi 2 жыл бұрын

No worries, take your time. 💪

@groomersking240 2 жыл бұрын

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

@BuildThatWebsite 2 жыл бұрын

There are two ways to do that: 1 - Edit the loop template using php to add an tag around your card. 2 - Use CSS pseudo-element to stretch the link the fill size of the card (easiest option for most people) You can see a demo of the psuedo-element technique in this video (linked to the correct timestamp): kzfaq.info/get/bejne/o8WPa5eikt-2hnU.html

@roppor2194 2 жыл бұрын

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 ...

@BuildThatWebsite 2 жыл бұрын

Thanks for the suggestion. Can tell me more about the ready-made templates? Are these block templates? From a page builder like Elementor? What theme are you using?

@demasmoha 2 жыл бұрын

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

@BuildThatWebsite 2 жыл бұрын

Thanks for the reminder. I was going to find a spot to share CSS code on my site, but I've added the CSS to the video description in the meantime.

@iUmarFarooqi 2 жыл бұрын

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

@BuildThatWebsite 2 жыл бұрын

You can add it with a plugin like this: wordpress.org/plugins/ajax-load-more/

@iUmarFarooqi 2 жыл бұрын

Thanks! 😊

@iamshanuroy Жыл бұрын

Plz make a video on astra grid layout

@BuildThatWebsite Жыл бұрын

You mean the blog module of Astra Pro?

@iamshanuroy Жыл бұрын

@@BuildThatWebsite how can I make grid layout in a astra free theme with css

@BuildThatWebsite Жыл бұрын

You can adapt the CSS from this video, you just need to change the classnames to match the correct elements in Astra.

@iamshanuroy Жыл бұрын

@@BuildThatWebsite I try this but didn't work

@Pendergeist Жыл бұрын

Hi Matt, I'm running into an issue where my archive articles are already in a column of their own: 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?

@BuildThatWebsite Жыл бұрын

It's tough without seeing your front-end markup, but I'd suggest setting your UL element to display:grid instead of the UL's parent. Basically you want the container for each article to be a grid item, and the immediate parent (presumably the UL) to be the grid container

@Pendergeist Жыл бұрын

It worked! Thanks

@Infonixelearn 2 жыл бұрын

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

@BuildThatWebsite 2 жыл бұрын

What's not working? Just the order of the heading vs image? That's controlled in the theme settings under 'blog' layout

@Infonixelearn 2 жыл бұрын

@@BuildThatWebsite Thanks for the reply. I do not have premium generate press them it has limited options in blog layout.

@Infonixelearn 2 жыл бұрын

In the Blog option, The heading is Shown on top, and below it is showing the Feature image. How can I adjust the heading below the feature image ?

@rithin586 2 жыл бұрын

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

@BuildThatWebsite 2 жыл бұрын

I'm not sure what you mean exactly. Where on Backlinko can I see it?

@rithin586 2 жыл бұрын

@@BuildThatWebsite I want same header element which was using backlinko

@BuildThatWebsite 2 жыл бұрын

Can you share an imgur screenshot of what you talking about?

@bovv8940 11 ай бұрын

But... just forgot one thingy: Make the titles the same height (often a client request actually) I bet it can be doen off of the onfo you provided, just saying Keep m coming!

@BuildThatWebsite 11 ай бұрын

Yeah, I would use flex-grow: 1 for the title element, so it will expand to fill any available space in the card.

@reyanshchattopadhyay95 2 жыл бұрын

Oh Brother I feel like kissing you

@BuildThatWebsite 2 жыл бұрын

You're very welcome Reyansh. Glad I could help! Good luck with your website 😎

@reyanshchattopadhyay95 2 жыл бұрын

@@BuildThatWebsite Brother I highly recommend to start a series on how you can make generate press more beautiful without elementer, or heavy codes. Right After watching your videos, I signup for WEB DEV course Btw. Thanks a lot.

@rhythmbox2998 2 жыл бұрын

do not work for astra theme. why?

@BuildThatWebsite 2 жыл бұрын

The html structure and classnames are different. You can use the exact same CSS (or similar) but you need to change the selectors.

@kalleaume 2 жыл бұрын

@@BuildThatWebsite thanks for this great video! When trying to remove the empty box at the beginning of the grid in the Astra theme, the section that needs to be remove is simply called '::before'. I tried '.ast-row::before {grid-column: 1/-1;} and this worked perfectly using the Inspect tool in Chrome, but didn't work when I applied it to the custom CSS in the theme. Does anything stand out about what I could be doing wrong here?

@BuildThatWebsite 2 жыл бұрын

When I run astra I don't see a :before pseudo-element attached the .ast-row selector. You're on the right track though, the .ast-row div is the one you want to use as the grid parent. But to delete the pseudo-element you can try this code: .archive .ast-row:before {content: none }