From the course: CSS: Advanced Layouts with Grid
Unlock the full course today
Join today to access over 23,200 courses taught by industry experts.
Place the cards on a grid - CSS Tutorial
From the course: CSS: Advanced Layouts with Grid
Place the cards on a grid
- [Instructor] So far on this chapter, we've been working at component level, treating each card as its own grid and then placing the items inside the card on that grid for the layouts we want. Now we can take a step back and treat each of the cards as a grid item and place them on a larger grid to grid full card layouts for wider view ports. The first step in this process is figuring out which container will be the grid container. I'm looking at the HTML, you can see each of the cards is a list item inside an unordered list. So, the grid container needs to be this unordered list with a class cards. Here I need to introduce a media query because we only want to introduce this more advanced grid when the view port is wide enough. So, I'll start out by setting up a standard media card. I'll set a min width of 50 m's, maybe, because I'm working on a small screen. Then I'll target cards and set up display grid and create two equal width columns. Save this, go back into browser and here we…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
(Locked)
The challenge48s
-
(Locked)
Overview of text-based card markup2m 10s
-
(Locked)
Create a grid for each card2m 21s
-
(Locked)
Position items on the grid4m 20s
-
(Locked)
Place the cards on a grid5m 17s
-
(Locked)
Overview of image-based card markup2m 21s
-
(Locked)
Using the grid to stack grid items2m 18s
-
(Locked)
Change the appearance of cards with flex5m 43s
-
(Locked)
Create different-sized grid items2m 10s
-
(Locked)
Create a complex magazine-style grid8m 43s
-
(Locked)
-
-
-