SHARE

Hey all, in this CSS grid tutorial I’ll show you how to make a mosaic layout using CSS grid techniques we’ve already learnt.

—– COURSE LINKS:
+ Atom editor – https://atom.io/a
+ GitHub Repo – https://github.com/iamshaunjp/css-grid-playlist

———————————————————————————————
Other tutorials:

—– HTML FOR BEGINNERS:
https://www.youtube.com/watch?v=Y1BlT4_c_SU&list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc

—– CSS FOR BEGINNERS:
https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

—– NODE.JS TUTORIALS
https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp

—– SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

============== The Net Ninja =====================

For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

================== Social Links ==================

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

7 COMMENTS

  1. Thanks for the tutorial, I have quite a general question. I know CSS pretty well and use it for a long time, however I always evade using newer properties due to their limited browser support and try to find workarounds. Can you recommend something for me to find balance between using modern techniques and caring about those with outdated brousers? An article of some sort maybe?

  2. Daaaaaaaaaaaaaamn!!!! that last part had me!!!!! That was so awesome!!!!! reminded me of creating magazines, Keep up the good work man!! loving what you do!!

  3. I remember you said CSS grid are responsive in previous tutorials, but when using the mobile module in Chrome, grids are not, I mean, they still take 33.3% of the screen, for example, how to make them 100% on header, when screen turns smaller?

  4. Awesome. So how would you go about doing that with dynamic content? Perhaps pseudo-classes? (ie: grid-item:nth-child(1) { grid-column 1/3; }

LEAVE A REPLY

Please enter your comment!
Please enter your name here