Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Responsive 4-Column Layout with CSS Grid - Build a Responsive Website from Scratch

via YouTube

Start learning Write review
Coursera Ad

AI, Data Science & Cloud Certificates from Google, IBM & Meta

Learn More → Corporate Finance Institute Ad

Finance Certifications Goldman Sachs and Amazon Teams Trust

Learn More →

Overview

Google, IBM & Meta Certificates – 40% Off
One Coursera Plus subscription covers most Professional Certificates on Coursera.
Unlock All Certificates
This course builds a responsive blog articles section from scratch using HTML and SCSS. It demonstrates CSS Grid layouts, responsive behavior, card styling, and hover transitions for desktop, tablet, and mobile views.

Syllabus

- Intro.
- Look at design for Latest Articles section.
- Start writing HTML markup for Articles grid.
- Start adding SCSS styles, using CSS grid for multi-column layout.
- Explain how CSS grid works, compared to flexbox.
- Using the Firefox Grid inspector.
- Responsive design vs intrinsic design approaches.
- Why I'm using the responsive approach for this.
- CSS Tricks article on auto-fit vs auto-fill.
- Start styling the card content-- card images.
- Add CSS grid gap and other spacing in card.
- Add background color and border-radius.
- Styling the card text.
- Add correct images and copy for each card.
- Add box-shadow to cards.
- Add hover state using transform and transition .

Taught by

Coder Coder

Reviews

Start your review of Responsive 4-Column Layout with CSS Grid - Build a Responsive Website from Scratch

Start learning

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.