Material UI Tutorial #18 - React Masonry CSS (masonry layout)

Hey gang, in this tutorial we'll use an npm package called react masonry css to create a masonry layout in our site.
🐱‍💻 🐱‍💻 Course Files:
+ github.com/iamshaunjp/materia...
🐱‍👤🐱‍👤 JOIN THE GANG -
/ @netninja
🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninja.co.uk/udemy/m...
+ Vue JS 3 & Firebase - www.thenetninja.co.uk/udemy/v...
+ D3.js & Firebase - www.thenetninja.co.uk/udemy/d...
🐱‍💻 🐱‍💻 Useful playlists:
+ Full React tutorial - • Full React Tutorial #1...
+ JSON Server Tutorial - • Up & Running with JSON...
🐱‍💻 🐱‍💻 Other links:
+ Material UI docs - material-ui.com/getting-start...
+ Get VS Code - code.visualstudio.com/
🐱‍💻 🐱‍💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja

[@VS257]

I always get sad when ur tutorial series end.... it's like, what am i gonna do with my life now. Lol
Thank you Shaun!

[@NetNinja]

lol. The next series is coming very soon :)

[@barrefaeli2333]

@@NetNinja ninja ur the best

[@nguyenhieu9714]

Thanks for the tutorial! Really easy to understand for beginners at UI coding and you also go through some react hooks as well in the process, really appreciated!

[@delta4v]

You should make a separate video about how to make a masonry from scratch. It would be a hit 👏

[@NetNinja]

Good suggestion, I'll give it some thought!

[@user-ng4bk2hy1z]

I'm really wanna say thank you! It's a great tutorial! And i'm so glad that i've comprehend all this speach. There're almost no such a great videos about mui in my mother tongue, and tbh English is not also my strong suit, but you made it very simple to understand all of this. Thanks again, gonna check out some more of yours tutorials

[@pedrambabazadeh1676]

I had watched another tutorial on MaterialUI before, but this one taught me lots of new things.
Thank you very much for this impressive course!

[@NetNinja]

Glad it was helpful! :) thanks for watching

[@marioacosta1842]

Hey Net Ninja, thank you for your videos. Every week I am watching them and learning about the latest libraries and technologies. Congrats and thank you!

[@JonBrookes]

Thanks for this whole series.
Extremely well constructed course - this is another highly professional piece of work that is invaluable for anyone to pick up material ui and react. If you know nothing about react, this is well worth the time and effort to follow as you made material more relevant by its use with react, its templating, props dynamic parameterisation and more. I like also the 'notes' project and its use over that of what others may have chosen a 'todo' example. Notes is a nice angle and far more useable for other projects - like when you sell a house it has to be decorated in a way people can see themselves living there, by this you've made it easy to see how material ui and react can be used together to build bigger projects.
I very much appreciate the work you do and have done here, thanks again

[@arnavraj9568]

The best MUI tutorial on youTube. Thank you for describing things in so details.

[@AndyChamberlainMusic]

thank you so much! This was a great series. Absolutely love the github repo with branches for each lesson!

[@ryanbiztech9181]

I second that. Awesome job Ninja!

[@jonathanparr8497]

So well put together. This guy is articulate and explains his subject so very well.

[@arihantjain8347]

Thank you so much I had just binged watched the whole course, it was really crisp and to the point.
Just what one is looking for.

[@davidcarmo153]

I spent my whole day on this tutorial and it was amazing, loved it! Thank you Shaun, You're the best!!

[@aliahmedkhan9690]

Wow! What an amazing teacher he is. Finished this super tutorial series and feeling lucky to have an youtuber like shaun. Thanks Man! You're a gem.

[@BilalAhmad-gy5zu]

What a wonderful tutorial series. Quick and Full of knowledge. Great Stuff mate!

[@RizaHariati]

Thank you! I have learn so much from your Material UI series.

[@arihantjain3274]

You saved me I was afraid of material UI big fan shaun!

[@andrewleonardi3351]

Fantastic series. Still totally relevant for V5 with a little tweaking. This helped me get a jump start on my new project. Thank you!

[@mob2540]

Your level of delivery is amazing! keep it up

[@emanuelameh5722]

Thanks Shaun! Just completed the series and very grateful as well

[@dejavukun]

Thank you so much. Learnt a lot in this series.

[@ahnafabir11]

Thank you very much. I have been looking for this kind of masonry tutorial for a long time.

[@shourovfoisal]

Awesome tutorial. Thanks Shaun! 💙

[@khandoor7228]

Great series, love Material-ui and this was excellent!

[@jnaras]

Excellent work Net Ninja. Very easy to follow and learn.

[@moe9647]

The best teacher on the internet hands down

[@erindeji]

Thanks alot Shaun. I really enjoyed the course. I learnt alot.

[@paarthagarwal1540]

Loved it not only material but learnt a thing or two about react too ❤️

[@enesugur2034]

I completed the 2 of your tutorial and they are wonderful! Thanks alot my friend!

[@ahmadalharbi9097]

Thanks Shaun , looking forward to your next course

[@jorgellanque7704]

Thanks a lot for all videos, those are so appreciated for my learning

[@dbansal1810]

Bro its simply awesome. You are a good teacher. You cover many cool things in a simple and yet understandable way.

[@SurajKumar-bq2bp]

Really nice series. Loved it

[@alowe5013]

Thank you so much for your content, you're always my go-to. I followed your tutorials and 'migrated' the app to MUI 5, and it was a really nice project to do :)

[@NetNinja]

Great to hear! :) thanks for your support, it means a lot

[@anamkhuram9596]

Loved the series!!! Really needed to use it urgently in a job....
Your series was perfect for it!!!

[@NetNinja]

Thank you so much Anam! Glad they helped! :)

[@CristianRodriguez-zn4wp]

I'd like to see React + Typescript series.

[@maskman4821]

yeah, me too, people nowadays using typescript in maintream frameworks such as react, vue, angular and svelte, it is a trend that no one can deny ...

[@LoveisHell85]

Me also!

[@shimin_mathew]

+ Redux

[@BharathKumar-iq7ku]

Thanks a lot man.. Helped me a lot to learn meterial ui

[@NetNinja]

That's great to hear Bharath, thanks for watching!

[@joshuaowusuansah1056]

Wow! Thank you very much for this tutorial. It was really beneficial.

[@ts3798]

Fantastic series man. Really well done.

[@kazimdminhajulhaider3709]

Thanks for the great series. Thumps up!

[@vitalxvv]

This video course is amazing! Thank you for your work, keep doing what you do, we love it!

[@NetNinja]

That means a lot :) thank you and thanks for watching!

[@lavanbradley9595]

Awesome as always! Thanks man.

[@poryanikmaram3444]

Thanks for this MUI series . Quick and Full of knowledge.

[@NetNinja]

Thanks, glad it was helpful :)

[@youneskhellaf202]

I learn a lot in this series: react, material ui, hooks, json-sever, styling ... ect
Thanks

[@Sheynan55]

Thank you for this series!!

[@madhan_b]

Thanks a lot!!!🙏 Learned a lot from this series 💯

[@francklepage8190]

thanks a bunch , your doing a great work mate

[@ganapathilana7069]

Awesome Mat UI tut series. Thanks a bunch.

[@andressalomon6703]

Great tutorials Shaun! Thank you very very much :D greetings from Argentina!

[@anyname8803]

Wonderfull work! Thanks for the efforts, keep up the good work!!

[@quangvinhnguyen7649]

This really helps! Hope you keep it up

[@rahulshetty3849]

Thanks for the series❤, really helpful, much appreciated

[@NetNinja]

Awesome to hear that, thank you! :)

[@sammov4477]

Awesome job! Thanks for sharing your knowledge

[@chtoho4043]

great content, absolutely loved it !!!

[@shobhitkumar9452]

Awesome playlist. Thanks a lot for your efforts.

[@johnchishugi4882]

Thank a lot for this wonderful lesson

[@callumfleming8836]

what a great tutorial thank you very much!

[@sheriffibrahim1065]

With This tutorial am gonna be a PRO
Thanks Shaun!!

[@GavynHoltMusic]

Excellent series, thank you!! Totally saving me on an interview technical assessment!! XD

[@user-py8wg2mx8k]

Wow, nice series. Thank you

[@mdakhtaruzzaman8818]

love you bro. every each video was perfect gide line for me. many many thanks, I hope you do great.

[@NetNinja]

Thank you! 😃

[@mugiwaranoDave]

Thank you so much Shaun

[@gonzalo836]

Great tut many thanks!!

[@MichaelKret]

done, thank you it was amazing tutorial

[@lahirudx]

Thank you. Just completed the series.

[@adyarabiat9394]

Thank you so much. That was an amazing tutorial

[@syedsaad317]

i completed the series thanks shaun for putting such a wonderful effort for us

[@NetNinja]

You're welcome :). Glad you liked it.

[@soorajkj1564]

We need your styled components series ❤️

[@NetNinja]

I'll think about doing this!

[@soorajkj1564]

@@NetNinja thank you 🥰

[@LucianoSoares85]

Agreed.

[@the_full_stack_junkie]

The champ awesome series need this to get met started!🤓

[@TechDevTips]

Thanks for your course. Fantastic !

[@NetNinja]

Thanks Trung! :)

[@muhammadumair6234]

Thank you Shaun!

[@imnemo2327]

Completed all 18 very nice videos

[@sanguis11]

that was awesome. thanks mate

[@IndrakumaraSirisena]

Good content , I learnt from the scratch...

[@farrukhatabekov595]

Thanks a lot, Shaun. As usual, simple and clean. If I want to use some tool or framework, I just see if you have a playlist on that framework and if you do not have one, I go to read the documentation.
All the best, Atabekov Farrukh

[@ashishverma9840]

I followed this tutorial series from start. You made material-ui easy to understand otherwise, every time i see the code in material UI site, i got miffed by complexity. Thanks a lot

[@johnaeronsencil8839]

Learned so much from you sir!

[@johny_ginger]

Loved it, Great One :)

[@mohamedyoussef8835]

Awesome Tutorial... it was really to the point ++++++++++

[@juanpa92008]

Thank you very very much Shaun!

[@NetNinja]

You're very welcome!

[@rohitkanchanshaw1482]

completed this tutorial! Yay

[@amitmondal7427]

This was very good journey.

[@JavascriptForEverything]

It was amazing thanks.

[@feyselahmed4581]

Thanks for this gem!

[@tunde6159]

Thank you so much!

[@brianmurithi2985]

Thanks so much for this super awesome series. I really learned alot from your tutorial. I would be very greatful if you do a crash course for v5

[@rajeshwarboss5967]

Cool bro.. way of teaching n talking awesome... Keep rocking Shaun..😀😀

[@NetNinja]

Thank you so much 😀

[@tulga.s2069]

Thank you very much !!!

[@JasonRouss]

thank you excellent course

[@AmDsus2Fmaj7Am]

Awesome content. You're the best mate. Idea to make this perfect:
You could a a text search feature (because people search notes) and an alternative table layout for the notes, like the Notion database table. Many times I have an URL column and a date column for notifications/calendar integration. That would be amazing.

[@amoghjutoor4196]

helped a lot Thankyou soo much

[@NetNinja]

You're welcome Amogh! :)

[@star2638]

WoW just wicked this is my best channel i have really enjoyed watching your playlist
Well wouldn't you mind to do some videos How to make multi-step Form that will be so Great

[@brandyn6124]

For those watching this video in the future, MUI now has it's own Masonry component that works almost like the one shown in this video.
First, you will need to execute `npm i @mui/lab`, then you can do the following (after importing it too):
// Other things here
Hope this helps!

[@nguyenhieu9714]

Thanks for the insight! But the right property for Masonry would be:

[@nastygambler2522]

Woohoo. 🎉just what i wanted

[@jayfelix5506]

Amazing amazing series loved every bit of it. Hopefully you could update for m=newcomers because of the updates in MUI library but overally really enjoyed it😊😊

[@NetNinja]

Thanks Jay! glad it was helpful :)

[@renatilyasov6873]

Thanks a lot!

[@cattalkhablandogato367]

Awesome tutorial. Now my wife doesn't let me in the bedroom but was worth it XD

[@NetNinja]

Oh no! ha.

[@sinatajik8887]

It was a great tutorial ❤

[@NetNinja]

Thank you! 😊

[@DreamingDolphing]

Many thanks for tutorial.

[@NetNinja]

You are welcome!

[@hernaan9]

amazing!

[@dom6477]

Awesome!