课程: Level Up: CSS Layout

免费学习该课程!

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

Multi-card layout

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…

内容