Game:

Counter-Strike: Source (2004)

Category:

Tutorial

Duration: 37:27

6,025 views

166

Learn how to create CSS masonry layouts in this step-by-step video course with Adi Purdila. ► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_EwFH4UyaFsA&utm_medium=referral&utm_source=youtube.com&utm_content=description

If you’ve ever browsed Pinterest, then you’ll have noticed that the various cards are displayed in a staggered way and don’t align horizontally. This is because the cards are not always the same height. This type of layout is called “masonry” and usually requires a bit of JavaScript to achieve. In this course, we’ll be exploring a few different ways of creating such a layout purely with CSS with Adi Purdila.

0:00 Introduction
1:44 What Is a Masonry Layout?
6:03 Masonry With Multi-Column Layout
15:38 Masonry With Flexbox
25:22 Masonry With CSS Grid Layout

Links:
• Masonry.js https://masonry.desandro.com/
• Isotope.js https://isotope.metafizzy.co
• CodePen Demo https://codepen.io/tutsplus/pen/KKMdjVQ
• Getting Started With CSS Multi-Column Layout https://webdesign.tutsplus.com/courses/getting-started-with-css-multi-column-layout?utm_campaign=yt_tutsplus_EwFH4UyaFsA&utm_medium=referral&utm_source=youtube.com&utm_content=description
• CSS Columns on MDN https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns
• Multicolumn Browser Support https://caniuse.com/multicolumn
• Unsplash Demo Image https://unsplash.com/photos/skAv-NHClaE
• Unsplash Demo Image https://unsplash.com/photos/Dw7ldQfe3dU
• Unsplash Demo Image https://unsplash.com/photos/FX7eYJrXaJk
• Unsplash Demo Image https://unsplash.com/photos/lccZLHwylHg
• Unsplash Demo Image https://unsplash.com/photos/u3Kqg12km94
• Lato Font https://fonts.google.com/specimen/Lato
• CSS Flexbox on MDN https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
• Flexbox Browser Support https://caniuse.com/flexbox
• Unsplash Source https://source.unsplash.com
• CodePen Demo 1 https://codepen.io/tutsplus/pen/pobjXgL
• CodePen Demo 2 https://codepen.io/tutsplus/pen/yLJYdej
• CSS Grid Layout on MDN https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
• CSS Grid Layout Browser Support https://caniuse.com/css-grid
• Demo by Jen Simmons https://codepen.io/jensimmons/full/vYNeRZw

Follow the course on Envato Tuts+: https://webdesign.tutsplus.com/courses/how-to-create-css-masonry-layouts?utm_campaign=yt_tutsplus_EwFH4UyaFsA&utm_medium=referral&utm_source=youtube.com&utm_content=description

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt_tutsplus_EwFH4UyaFsA&utm_medium=referral&utm_source=youtube.com&utm_content=description

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_EwFH4UyaFsA&utm_medium=referral&utm_source=youtube.com&utm_content=description

► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/tutsplus
► Follow Envato Tuts+ on Facebook: https://www.facebook.com/tutsplus
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Other Statistics