课程: CSS: Advanced Layouts with Grid

免费学习该课程！

今天就开通帐号，24,700 门业界名师课程任您挑！

Position items within the card grid

Position items within the card grid - CSS教程

课程: CSS: Advanced Layouts with Grid

开始一个月试用 购买团队方案

Position items within the card grid

“

- [Instructor] Now that we have our grid for each card defined along with our template areas, the next step is to place the grid items on the grid. So just to reorient ourselves here in the HTML, card is where our grids are defined. So our grid items are just going to be the first level descendants of this grid. So we've got figure with the class of featured-image and a div with a class of info. And those are the two selectors that I'm after. So back over in my style sheet for this lesson, I'm going to go down to our card grid. And within that, under these nth-of-type selectors, I'll just add two rules. One for featured-image and another for info. So the featured-image we want to place in the grid area that we've been calling image. So I'll just say grid-area: image. And then for our info, we want to place that in the grid area we've called text. So grid-area: text. So if we go back to the browser, I'll refresh here. And for this first card, let's turn on the grid overlay. And here…

内容