Awesome Masonry Layouts with Colcade.js **REUPLOAD**

www.linode.com/designcourse - Use code 'DESIGNC19' to get $20 credit on your new Linode account!
-- Bloopers @ 19:15 - SORRY for the reupload! By accident, I failed to remove 90 seconds of SCREW UPS and I tried fixing it within youtube's audio editor -- but that ended up MUTING everything else in the video! So, I had to delete it! (this youtube stuff isn't easy sometimes). Sorry again! Anyhow, today's video we will cover the topic of creating a Masonry grid / layout using Colcade.js!
Colcade.js:
github.com/desandro/colcade
Codepen demo for this project:
codepen.io/designcourse/pen/P...
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!

[@DesignCourse]

Please forgive me for the reupload! -- By accident, I failed to remove 90 seconds of SCREW UPS and I tried fixing it within youtube's audio editor -- but that ended up MUTING everything else in the video! So, I had to delete it. UGH, it's been a rough day. :(

[@Karandhanwani]

No problem bro we still love you ♥️

[@TraversyMedia]

Damn, I missed it :(

[@CoderSprint]

Whenever i make a video all i do is bloopers 🤣🤣 so I didn't release any video since a year now

[@sujalkhatiwada2267]

Sir, I kept the script tag before using this library to render images dynamically before the script tag of the library, but doing do, it's not working, why ?

[@RaajKanchan]

Thank you, I am gonna my update website.

[@jaredc8281]

Awesome video bro! =) Just curious, but what are your thoughts on using something like flex, sass, and nth-child selectors to create this layout instead? =) Havent tried myself, but I imagine it's not too much work to remove colkade entirely and use those sweet sass skills! XD Cheers!

[@abdussamad0348]

Thanks a lot

[@Frankslaboratory]

Nice

[@hannahsunderland1950]

GAHHH thank you! I've been looking some something this straightforward for AGES! Legend!

[@Dadolj20]

When is the appropriate to use will-change property and how do you decide that you want to use it ?

[@SiLeNzSky]

Gary,
about the vsc/chrome windows next to each other,
just grab the top bar of any programm and move it to any edge/corner, windows will make proper sizes for your selected programm
(grab vsc topbar to the left, windows will ask which window should be next to it(right side))
btw, if you scale one window it will automatically adjust the size of the other window aswell so there won't be any gap between them
// writing this comment, click on comment, error, ctrl r, video removed, nice

[@DesignCourse]

I'll give this a shot right now! Thanks!

[@georgeliss4015]

have you used it with Hugo? For some reason, the layout gets messed up when you open a post , and then go back... it probably requires some custom JS, but i just couldn't figure it out...

[@prakashchand8445]

Perfect define

[@morganbaker6894]

Would I be right in saying using flex-basis would prevent hiding columns for a responsive layout?

[@dhruvsuthar3085]

nice video 😀😃😄

[@neoroussel9092]

Hi! I really enjoy this tutorial, and the results I get from it are awesome :). However, everytime I set up colcade the images don't seem to be distributed evenly : I get a bunch of images on the first columns and very little on the others which makes the user scroll much more than needed... I haven't changed much of the 'core' css used in this tutorial but I wonder if there's a way to solve this problem using some sort of style/script. Thanks in advance!

[@137lewis137]

Did you solve this? been stuck on this for a while and might have to abandon Colcade

[@juanchoferro3193]

Same issue !, do you solved it ?

[@yussufclark9390]

Can you do create a tutorial on vertical masonry layout with flexbox?

[@shahbozabdullayev5583]

There is also a package called Isotope.js. Which has lots of functionalities like filtering, sorting the data. It would be perfect if you explained deeply that package.

[@imane5971]

would this be the right library to use inside a react project?

[@rsfaelto1234]

Thank

[@adnanamin3666]

Hi, Simon!
I've used it. It's very good. But one problem, I can't seem to get rid of the gap between rows. It's OK between columns. I'm not using any margin or padding between rows/columns, still a gap appears between rows. Any suggestion?
Thanks a lot for the tut. 😍

[@gauravchaurasiya8678]

Can you make the video on elasticsearch and use mysql query for get the data from it .means if we want the search my like same mysql

[@BMikel]

nice but what about filtering on click?

[@aprilfunsten3930]

"Don't be loud, kids!" 😂 I can totally relate.

[@creativeedge3569]

Will there be any problems using this in vue?

[@_the_one_1]

I didn't watched the whole video but can't you make the same thing with just CSS grid ?

[@137lewis137]

Hi, great video! Any idea how to get this working with Wordpress? can't seem to get the images to format. CDN appears to load. Thanks

[@137lewis137]

Didn't add the initialise code to my main js file... sorted!

[@sudahmalam1]

nuhun wa

[@abelwondafrash]

👌👌

[@CoryTheSimmons]

tbh I'd avoid JS masonry and use CSS solutions. The JS approaches have a lot of problems with React.

[@armandsalle8447]

I feel like I've seen this tutorial before 🤔

[@snakemanluffy7645]

you actually did 😅 me too

[@mohsenkhalili4722]

That's why it's called REOPLOAD

[@armandsalle8447]

@@mohsenkhalili4722 it was a joke, calm down

[@dfdfg5646er]

sorry dont like library