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.
🚀 [FREE TRIAL] Superfast VPS Hosting I use: https://cwdeal.com/grid

▸▸ 👨‍💻 Get the CSS code used in the video
https://www.buildthatwebsite.com/video/responsive-grid-layout-card-design-for-wordpress-archives

▸▸ Learn to use Chrome DevTools Inspector:
https://www.youtube.com/watch?v=151NXMk0a2c

📦 More WordPress CSS Tutorials
Fix squished text on small screens: https://www.youtube.com/watch?v=5LKNYg_MGbo
Custom Comparison Table: https://www.youtube.com/watch?v=eQS66XPi0zA

▸▸Learn CSS Grid (resources)
- Complete Grid Guide: https://css-tricks.com/snippets/css/complete-guide-grid
- CSS grid in 20 minutes: https://www.youtube.com/watch?v=9zBsdzdE4sM

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

Видео Responsive Grid Layout w/ Card Design for WordPress Archive & Category Pages (pure CSS) канала Build That Website