Coursera Plus Annual is 40% Off — Ends June 29.

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

YouTube

Learn How to Create a Responsive CSS Grid Layout

Kevin Powell via YouTube

Start learning Write review
DataCamp Ad

Power BI Fundamentals - Create visualizations and dashboards from scratch

Learn More → Coursera Ad

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

Learn More →

Overview

AI, Data Science & Cloud Certificates from Google, IBM & Meta — 40% Off
One plan covers every Professional Certificate on Coursera. 40% off Coursera Plus Annual.
Unlock All Certificates
Explore the creation of a dynamic, responsive CSS grid layout in this comprehensive 32-minute tutorial video. Dive into essential CSS properties like aspect-ratio and object-fit while learning to structure HTML, set up a basic grid, style cards, and implement image aspect ratios. Master techniques for stacking content, making grids dynamic with auto-fit, and creating featured cards. Discover how to optimize layouts for small screens and gain insights into CSS resets, Emmet usage, and advanced grid concepts. Access additional resources, including a GitHub repository and related videos, to further enhance your CSS grid skills and create visually appealing, responsive web designs.

Syllabus

- Introduction
- Writing the HTML
- Setting up a basic grid
- Styling the cards
- Using aspect-ratio on the images
- Stacking content with grid
- Styling the card content
- Adding aspect-ratio to the cards
- Making the grid dynamic with auto-fit
- Creating a featured card
- Styling the featured card
- Fixing things for small screens

Taught by

Kevin Powell

Reviews

Start your review of Learn How to Create a Responsive CSS Grid Layout

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.