From the course: Advanced Responsive Layouts with CSS Flexbox
Join today to access over 22,500 courses taught by industry experts or purchase this course individually.
Challenges with card layouts - CSS Tutorial
From the course: Advanced Responsive Layouts with CSS Flexbox
Challenges with card layouts
- Card-based Layouts are a popular design pattern on the web right now, both for mobile and desktop, and for good reason. Cards are visually appealing, easy to interact with, and they allow us to communicate multiple different pieces of information to the viewer in an understandable way. Designing Card-based Layouts is easy, but implementing them using Pure CSS has been a pretty tricky endeavor, at least until now. If you've ever tried to build a page with a Card-based Layout like you see here, you will have come across some common and quite infuriating issues caused by the limitations of pre-Flexbox CSS. Right now I have my cards here, they're each articles, and all the cards are wrapped inside a common div, and to position them the way I have right now, I've set a width for each of the articles, then floated them to the left, and then given them each a margin on the right-hand side, and on the bottom, so that they're separated. But when I scroll down, you'll notice several problems…
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.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.