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.
Overview of text-based card markup - CSS Tutorial
From the course: CSS: Advanced Layouts with Grid
Overview of text-based card markup
- [Instructor] In this first example, we'll look at a text based card. But technically the contents of this card could be anything, text, images, video, whatever you choose to add into the card. The purpose of this example is to show you how component level grids make aligning contents inside cards easier. Right now these cards have no "O Grids" inside them and they're displayed the way they would be if you just applied standard styling. So this is our fall back. Now, you may wonder why you would want to display cards like this in a vertical stack on the full width of the screen. The reality is you wouldn't do this. You would add these cards into a larger layout that have maybe sidebars or something else. But here we're just focusing on the cards themselves, and how to create layouts with just the cards. So you can place those layouts anywhere else inside anything else later. The HTML structure of these cards is straight forward. We have a Main, with a class="main-area". This is where…
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)
-
-
-