免费学习该课程!
今天就开通帐号,24,700 门业界名师课程任您挑!
Multi-card layout
- [Instructor] Cards are typically displayed in a multi-card layout of some sort. In this challenge, you'll build on the card from the previous challenge by displaying multiple cards within the same layout. The layout can show at most three cards next to one another. When there is insufficient width available, the cards must wrap down to the next horizontal line and the position and layout of the wrapped row is entirely up to you. To test, change the viewport width to ensure the cards display properly and wrap as intended across all viewport widths. Also, try adding additional cards to see what happens. If we go over here and look at the preview, you can can see right now we have four cards that are already wrapping. If I reduce the width here, you can see the cards will automatically wrap down as necessary to always display the cards in the way that we want, without the cards ever getting too squished and without…
内容
-
-
-
Center content horizontally and vertically2 分钟 48 秒
-
(已锁定)
Navigation menu alignment3 分钟 35 秒
-
(已锁定)
Grid with featured content4 分钟
-
(已锁定)
Equal-height columns3 分钟 55 秒
-
(已锁定)
Full-page and two-way split4 分钟 4 秒
-
(已锁定)
Holy grail layout7 分钟 4 秒
-
(已锁定)
Pull quotes7 分钟 1 秒
-
(已锁定)
Full-bleed sections7 分钟 55 秒
-
(已锁定)
Responsive card6 分钟 34 秒
-
(已锁定)
Multi-card layout6 分钟 28 秒
-
(已锁定)
Dynamic card5 分钟 21 秒
-
(已锁定)
Dynamic wrapping multi-card layout5 分钟 8 秒
-
(已锁定)
Dynamic grid gallery6 分钟 2 秒
-
(已锁定)
Paged layout6 分钟 6 秒
-