课程: CSS: Advanced Layouts with Grid

免费学习该课程！

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

What you're creating: A uniform card layout

What you're creating: A uniform card layout - CSS教程

课程: CSS: Advanced Layouts with Grid

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

What you're creating: A uniform card layout

“

- [Instructor] So far, we've seen how to make a multi-column layout with grid and a full bleed layout using multiple grids defined with the same rule. In this chapter, I want to cover another very common layout pattern you'll find on the web, which is a card layout. Card layouts are well-suited for things like product category or search results pages, blog post archives, or really anytime you need to show a preview of information for a lot of items. I'm calling what we're building in this chapter, a uniform card layout and by that I simply mean that every card is identical in how it's arranged, and the overall layout is organized neatly into columns and rows. At first glance, you might think this is a better fit for Flexbox, and you'd be right in the sense that Flexbox could totally handle this layout that flows along a single horizontal axis and wraps into additional columns as needed. But using GRID, lets us do something interesting in this case, which is to stack grid items. In…

内容