How to Create Website Layouts Using CSS Grid | Learn HTML and CSS | HTML Tutorial

[@Dani_Krossing]

NEW UPDATED 2023 COURSE AVAILABLE! 🙂 You can find it here: kzbin.info/www/bejne/rGnNdaF4jshjmNU&ab_channel=DaniKrossing

[@MaxCooperJones]

i have learned so much in this 27 mins tutorial. the responsive part was a gem of an explanation. this is definitely the best CSS Grid tutorial for beginners and to us who yearn to build a fully responsive site. thank you much to the author, blessings.

[@gchenpz]

27 mins took me 1 hour to digest and understand. lol great tutorial video! learned and improved.

[@oogway69]

IT IS 28MIN

[@shruthisriram6275]

agreed!

[@Abh19021]

You have no idea how much this tutorial saved my ass. I got more secured in my job. I was overconfident with the project and made the website for the desktop thinking that I will make it mobile view later and it wasn't working. This tutorial came as a blessing.

[@ismail.dalhatu]

I was scrolling all over KZbin watching and quitting css grid tutorials but immediately I stepped on mmtuts channel my mind is at peace to watch i knew am gonna understand it. my number one channel from scratch in programming particularly web dev ! Thank you 🙏 mmtuts

[@zangovu]

This is a really good tutorial on grid, you make it very easy to understand and the animation do help a lot. Subscribed! Thanks.

[@alexandros-markovits]

Zango Vu i agree, the animation did really help to understand indeed! :)

[@Maxx.motivation]

ZANGES2RQT51Q4HE5OUaaNDE2 Vu äxÈXFFĢJÜa1 GDGDDQC2BW3LFRSIATFRRZNz3GDGDDQC2BW3LFRSIATFRRZNZ3t0 4Gund3müx91u29u undz5e534e67v Y"----¥¥(₩₩((¥₩₩ q

[@LobanovSpace]

Eeeee, like

[@blockmaniac4898]

Agreed! =)

[@clarkvaughan]

Wow, lots of messages, lesson requests, positive comments. That's the sign of a effective teacher. Great work.

[@ikebipe]

we love that annoying typing sound

[@suzukaze_aoba_98]

This time, I decided to study CSS and HTML, and while browsing the CSS related videos on KZbin, this video helped me a lot :) I am a middle school student in Korea who dreams of a front-end developer. Thank you:)

[@zunairullah]

One of the best tutorial on css grid i first saw it 4 yrs ago but still i use it as a ref guide come back again and again to watch it

[@GilchristRyan]

This is fantastic. Question though: would it be better or worse to use the and tags, as well as others, rather than defining your own class of the same? Does doing it either way present problems that a beginner like me might not think of immediately?

[@КонстантинРаковский-л3в]

Watching it in 2018 and i can say one thing, your tutorials are the best. It is really easy to understand everything. Of course just watching wont help- everyone who watches this should code again and again and again to fully remember this. Keep up the awesome work.

[@nielsencs]

How refreshing to find clarity, precision and brevity all in one excellent tuorial! In fact the 28 minutes just rushed by - some other ones I've seen seem to drag on but are only 10 minutes long. Keep up the good work :)

[@samsar7]

i am watching this video from sri lanka. and i have seen many videos of you.you are awesome .your explanation is great . thank you.may Allah bless you .

[@samuelrochefort]

One word. "Perfect". I love when you add info about mobile first in the last 2 min!

[@MuhammadAbbas-uq4bt]

Its wonderful and I really enjoyed. If you are confused how CSS Grid works and want to learn how to use CSS grid for your webiste layout must watch its very helpful....Thank you MMTUTS.

[@mohammedwaliullah95]

Wonderfully executed video... I am a total newb to web dev....the level of detail and content presentation is so good I understand at the same pace you present your video !!!

[@kza3575]

Your channel has been a fantastic resource for me to get through my Web Development class - thank you!!

[@taariqq]

That was an excellent video! Explained a few things that I didn't know I didn't understand. Thanks.

[@bhushanahire459]

I don't no why your videos have so less views.You are making one of the best contain amongst all youtubers related to web developing.I hope your channel grows fast.Luv you bro✌️

[@Dani_Krossing]

Thank you :)

[@christophe1800]

I can confirm, really good explanation. TOP TOP TOP. At least one upvote from me!

[@robertmuszynski9636]

This is a great beginning video!!! I was wondering if you could create another training video designing an entire webpage. Specifically, how you can enter multiple lines of information within a 'content' area without it effecting all of the other heights / lengths. Also, if you don't mind, what software are you using to video capture your screen? Thank you!

[@saheedadebesin]

This is one of the best lessons I've ever received.. This is genius and the responsive part? God!!! That was awesome.

[@leoncampa]

Thank you. I have learned more from watching a 30 min video of yours for free, than I have after having paid $1000 for my local college and over 10 hours trying to wrap my head around this.

[@Oswee]

In the history of whole Web Development this is the most most AWESOME feature!!!

[@netics2]

lol, probably you haven't heard of flexbox :)

[@Oswee]

Probably I know Floats, Inline and Flexbox pretty well and looks like you don't understand you talking about.

[@OnTheArchipelago]

Dev Netics isn't flex box more useful in 1 dimensional layouts and CSS grids for 2d?

[@en6721]

Just started learning html and css for a month now. I have to say this tutorial is beyond helpful! I am going to apply this to streamline front-end dev projects. Thank you so much for this!

[@KanagawaMarcos]

I finally watched all of your videos from "css and html" playlist (within 2 days in a row). Thank you very much for you content, it was the best that I found on youtube about HTML and CSS. I really feel confident to build my own web site right now. :D

[@pinnaclewd]

Probably the clearest and precise video about css grid! Thank you 👍

[@surinfarmwest6645]

Daniel, another brilliant video with some very good tips; 'grid-template-rows' not required and 'align/justify'. I noticed yesterday, using my laptop, that the BBC cricket was using m.bbc ....... so design for mobile first. Once again, many thanks, Farm West

[@gonefishing2006]

I've watched at least 4 videos today (OK yesterday) on CSS grids. This is by far the easiest to follow, or am I saying that because it was the forth one I've watched. In any case I am actually starting to understand it and can follow along.

[@scribblingjoe]

I think this is the best explanation on css grids I've seen. Glad I found this.

[@lassebrustad]

a really good tutorial, even for me who actually use most of this normally :) I just did noticed that you forgot some grid spesific code! 1. for the "grid-column" it's possible to automatically choose the last area in a row or column by using e.g. "grid-column: 1 / -1" 2. to choose the size of the width or height, you used "1fr" witch is pretty good and the old-style "500px" witch is useful in many situations, but you didn't say anything about "minmax" that can make it possible to avoid media queries! if you ask me, you should tell about it in the video! 3. the last thing I did care about, building a website using CSS3, but using the old and outdated HTML4 coding? why not use the modern HTML5 tags? you can use instead of just using all the time I really love your tutorial videos, but as a hobbyist web dev that does not go to school for learning, I do care about how the code should look like to easily change it later or to easily let someone else do changes without being confused by reading a ton of classes! by using HTML5 it's easier to build a better, shorter and more controlled CSS code too ;) EDIT: I've seen multiple of your videos, after I found this video, you got a new subscriber, even I'm not a fan of using KZbin! :P

[@caroldanvers265]

I certainly learned a new way of doing CSS grid. This was really easy to understand and I've learned a ton doing this tutorial. Thank you!!!!

[@EnCognitivecom-sf7qg]

Best CSS Grid tutorial on KZbin. God bless, brother.

[@giuliareinecke2635]

can't thank you enough for this video and your channel in general! you make learning programming so much easier. your videos are structured and at the right speed! props to you. thank you!

[@Dani_Krossing]

Thank you :)

[@noestephenzimba9213]

Nicely explained! Was struggling to understand its concept and implementation, now out of darkness. Thanks Dani

[@Yaqut5]

this is an amazing lecture. I always found you a better teacher for me only hahaha. You are great. but please if you can make more videos about the css grid. because I really need to understand it a bit more. I learn slow but i want to learn. thank you :)

[@DylansLappalterCopium]

This is probably the best CSS Grids video out there! Thanks

[@lennonwoodturning6059]

Thank you! I have been watching all of your tutorials; from HTM/CSS, to JS, to PHP. Your are a talented pedagogue. Keep up the good work! I appreciate the teaching

[@kevinzhang8974]

such a simple and clear and practical crash course for CSS grid. Thank you!

[@irwind65]

Excellent tutorial! I started using CSS Grid after watching several of Rachel Andrew's videos, which are also very good and detailed (some an hour or more). I was initially challenged getting all the "parts" to work together. My point ... this tutorial excels in large part because of your excellent use of animation. By showing code side-by-side with the visual result and your clear explanations, it all comes together instantly. How do you do superimpose the browser view over the code? I imagine it's in post-production of the video? Well done mmtuts!

[@zionexodus4055]

this video is more practical. the best video on grid i have watched so far. thanks

[@lisaihde]

You did this video in an affectionate way. I liked the graphics for explaining the grid-attributes. Thank you ♡

[@MrDarkWarrior89]

Man, taking an online bootcamp class and your tutorial on grid, is super helpful. Love the way you simplified everything and made it super easy to understand. Thank you :)! look forward to more videos.

[@zefypissaki8524]

Definitely the most inclusive and comprehensible tutorials i've found so far. You're really doing a great job! Thanks for the vid!

[@clarabaardman5114]

Thank you for your straight forward lesson in grid. It's step by step and easy to follow.

[@YabbaDadADo]

Absolute legend! I had no idea how enjoyable layouts could be until I found CSS grids. I always relied on 960gs etc. Thanks for a great video!

[@laross70]

This is a great and easy to follow tutorial.. cant wait to see your other videos!!

[@STUPIDYOUTUBE_HIDINGMSGS]

You are an amazing teacher. It makes it easy to follow and not boring unlike the others that makes me sleepy and lose interest. Make more videos on Javascript and other frameworks please, thanks

[@Haideri_Lens]

After watching so many videos i finally understand how grid works from this video .Thanks man

[@VickyLatorreArt]

I have learn more with you in this video than I have learned the last 8 years with others. Thanks for sharing.

[@RowanvanZijl]

So i was looking for a way to make my website responsive, watched the video and Boom, my wesite was responsive. You're a master man. +1 subscriber

[@tristynspies8284]

You are awesome man, your tutorial moves at the perfect speed and your voice is clear as well as you explain everything properly. Thank you very much, keep up the good work.

[@naybordesign]

Best tutorial on css grid I've seen so far. Illustrating the different ways to manipulate layouts with animation was perfect! Awsome job!

[@markjulius6905]

By far the best tutorial on GRID!!. Thank you Sir.

[@javiertrevino5535]

this is an excellent tutorial to finally learn CSS Grid, which Is something I've wanted to do for a while now. Thank You so much. I have a question though, in the part where you used empty 1fr columns to wrap the website, wouldn't using fixed 500px values affect the responsiveness? this kind of thing confuses me, because a lot of articles and books recommend using Ems for everything while other people use pixels, so I was wondering if anyone could lead me to a definite answer on this dilemma

[@nojvaz2392]

This is great, greatly appreciated for the time! What approach should we use first when designing a website? Should we perform mobile first or desktop? If we do mobile, what size should we start with? I have an iphone 7 Plus but other users might have smaller phone, should i utilize the smallest screen dimension?

[@jwf3148]

Excellent tutorial - this will be a go-to reference video as I work at becoming familar with and implementing CSS Grid.

[@marcelvanlierop]

My compliments: finally a GOOD VOICE! Easy to listen to for half an hour :) Good tutorial as well! Just subscribed.

[@techcanyon411]

I am a web developer, what are the essential software that could help me to develop multiple website theme within a few minutes.

[@rufodeer5421]

@@techcanyon411 u usually spend around 4 hours to a week to develop a website / theme, not minutes

[@andrewperez7844]

Just started following you and you are easily my favorite KZbinr in this subject not only because of the quality of the instructions, but most importantly because of your calmness and awesome personality! Also, I really loved the animation, it helped drive home the information.

[@zunairullah]

Your are genius man. you given the secret to everyone free. big heart you have God bless you and God may keep you in straight path. my prayers are with you. you solved my problem

[@hangor3620]

That's the best grid tutorial i've ever seen. Thank you!

[@josefer274]

yeah man ive been wacthing a lot of video about css grid, but honestly this one is amazing... well done

[@coolbreeze0938]

so I have been following along with the video, but yet the rendition in Microsoft Edge is not adjusting the different items. The furthest it has work is the back ground colors for even and odds, any thoughts?

[@ninjamalam7052]

Quick question... I noticed there are many ways to display your elements in a grid, such as grid-areas or grid or span keyword etc, which method would you say is most effective? I have just come across your method in this video and it looks much easier! Great video!

[@rafaellerescapone]

thank you so much mmtuts! i have been studying CSS grid for a while, but sometimes i need a refresher on a fewthings, and your explanation is clear and concise, so this is a great consult material (sorry for weird grammar/sintax, english is my second language)

[@chrisjacobs3360]

Hellooo Tuts. Started around a year ago watching your tutorials. Gave me great ideas and taught the basics. Thank you. Loved the video of you showing us your tent studio. Made me wonder how dedicated you were for success. Aways now I am back shall look lots over the tutorials I have missed. Cheers

[@kjemradio]

CSS Grid is two dimensional where as Flex Box is one dimensional. That's really the best way to describe the differences.

[@demeauswong9142]

Thank you for such a thorough and articulate tutorial. I am completely new to HTML and CSS but I was able to follow along just fine!! Cheers!

[@arnojones8566]

I *did* enjoy it! Direct, to the point, no divergent topics. This makes me want to watch your other tutorials now. Subscribed!

[@ambientsoda106]

The only thing missing from your tutorial is the process of getting you web page design hosted and getting a domain name free or at a cost - I think if you made that kind of tutorial it would complete your brilliant tutorials!

[@Dani_Krossing]

You mean this one ;) kzbin.info/www/bejne/hmqwc2Vnbc-tfJY

[@ehighibeenyinna]

This is the very best I've seen. Thank you so much. I'm finding difficulty understanding how to apply div and class in flexbox. i know you have done something on that in the past, pls, can i get a link to that?

[@Arthyaful]

I am a starting webdesigner and this really helped a lot! I do wonder something. I am following this course where we mainly learned to play with margins, parddings, width, heights and floats to get the boxes where we want them. Seeing this gridlock makes things so much easier but is this grid-layout a full replacement for these floats etc? Can i use this grid in every situation? Or do i have to keep floating still in mind?

[@malikabdulaziz8130]

looking forward for some front-end tutorial and found this, it's really help me, thank's a lot

[@SephOrtha]

Whoa! ⚡️That was awesome! Nice work with this video hey.

[@jamespaz4103]

Learning about the how you wrapping a css grid is the best thing happen in my life. Its one of my main problem when making a responsive website, tried other method of using minmax() but it doesnt work perfectly for me. TY :)

[@ShanTechSolutions]

I am really thankful to the holder of this channel who has shared this impressive paragraph at at this time.

[@stepbystepscience]

Great video. Going to try it out.....when I have time.

[@yukihyo8394]

would it maybe be an idea to start a series where you build an entire website from scratch, explaining a lot of things that usually arent explained like map structure and that kind of stuff. or maybe explain something about wireframes. what you could do it insert multiple languages like html/css, js, php, ajax, jquerry etc etc. a lot of people do this kind of series but usually make them way to boring and extended. i would love to see you do this :D (for example, make a website that contains some advanced css like animations and using the css grid, explain why you give certain elements certain classes, explain complicated css selectors like: div[class^="img-"] {} create a login system and comment section[reffering to your tutorials ;)] and try to use things like include_once/require_once for footers/headers/navs.) ofcourse you should tweek this idea to fit your channel and your style, but it would be awesome if this series contains beginner information on how to start a site and a lot of advanced things like complicated javascript code or clearing up things like nth-child() (I could see how people dont understand this at all). I would love to hear your feedback on this idea! if you have any questions feel free to ask me as well, I am quite bad at explaining so I would understand if some things sound vague. (try to keep the website as vanilla as possible tho, that means, dont use things like sass or jade, or programs like jekyll. In my opinion, it would be awesome if the viewer does not have to install anything else on their pc besides a local webserver to follow this series as well) :) Peace!

[@Johan-rm6ec]

Would you do it for free also?

[@FlashlightGamingArmy]

@@Johan-rm6ec except he wont do it for free he gets paid through monetization

[@sajsaj932]

This grid tutorial is more than perfect...thanks so much

[@shachaha]

Its Friday, after midnight and I am sitting at home watching your tutorial with those great animations that excellently support your explanations: BEST DECISION I could have made for tonight!! Great Work! Keep it up. :D

[@rtate69]

Excellent teaching style. Great video. Thanks!

[@marcmanleydev7624]

Thank you Dani. Even though this is almost 4 years old I found this really helpful.

[@SlowEasyEnglish]

Another awesome tut, Dan! Thanks so much for these. I do have one question. Maybe I missed something but I don't understand why grids would be better than a wrapper. With a wrapper, you just use 'margin: 0 auto;' and it will always be centered, which seems like a more elegant way than to add periods in the grid, no? Also, in cell phone mode, instead of keeping two columns, could you use one column and specify 'grid-template-columns: 1fr;' and 'grid-template-areas: "title" "header" "sidebar" "content" "footer";'?

[@Dani_Krossing]

A wrapper is definitely also a possibility. It all depends on your preference :) and yes you can change the columns in mobile mode.

[@peterdaze1]

finally i get grids in general which was my major problem! thanks a million!

[@chengzhang4341]

fantastic tutorial! best css grid tutorial in this planet! i want more!

[@Kuwandi]

this is very good - my only comment is : it's a lot of information for newbies, therefore at some point - it would be good to stop and section this information and summarise / synapsys...of what we just did . Otherwise it feels like a run on information incomprehensible to grasp for new learners.

[@musicalymil]

Splendid tutorial! Could you please make a simple tutorial on how to use Atom efficiently? Thank you!

[@suparnobhattacharya6345]

There should be option of giving like to videos more than once on KZbin which should be only be applied to your channel. Your vids are 🏆

[@urekask537]

Wow, had a really hard time understanding css grids but your visualization made me understand it, thnx alot! :)

[@caperpri6108]

This was very interesting and easily understandable. You are so one of my favourite video tutors now. Thumbs up and subscribed. Please keep up the good work cause people like you are almost my only source of obtaining knowledge. Sincerely caperpri.

[@timtitus7861]

justify-self: start / end just fixed a problem I've spent the past 3 hours on. THANK YOU!

[@grace2420ify]

Really good videos. I always refer to your videos over other tutorials. Keep up the work!!!

[@oktaycolakoglu]

Excellent video. I dont know english not exactly but I get it clearly. Thats animations when coding, these are amazing helpful. Great! 👌

[@roelofco]

Loved the video!! Which text editor are you using?

[@musiquedumonde777]

Thanks a lot uts so useful but may i know which programs you r usibg to be able to edit html and css at the same time?

[@geekatari4391]

Nice vid man. I am new to responsive design and I was wondering how you make a website to display the mobile version if the desktop version is incompatible? Do you use any JS? Best wishes.

[@theamazingtop7835]

This is even more convenient than flex box. Thank you for the tutorial.

[@AbhishekKumar-vw3mo]

i just need to know that if we are designing our website with grid which is very easy then what is the use of flex-box. As in you flex-box exercise in which you created gallery we can do it with grid also. Correct me if i'm wrong.

[@ajmalbakhshiamirpoor1343]

Haven't yet fully watched the video, the animations are gr8 and you have done an awesome job. Thank you and subscribed!

[@robertgreco575]

Absolutely amazing video man.... helped me more than you could ever know

[@donharry20]

Nice video mate! Can you do more? Like a series sort of. It would be awesome.

[@summysanny]

One of the finest video available in KZbin.