CSS grids will change how we create website layouts | Learn HTML and CSS | HTML tutorial

CSS grids will change how we create website layouts | Learn HTML and CSS | HTML tutorial. Today you will learn about CSS grids, which is a new method we can use to create website layouts. CSS grids are the future of webdesign layouts only using css, and in this lesson I will give you a guide to using CSS grids.

Lesson chapters:

1: (00:15) Introduction to CSS grids
2: (04:53) How to create CSS grids using CSS
3: (09:13) How to place HTML inside the CSS grid using method 1
4: (13:27) How to place HTML inside the CSS grid using method 2
5: (16:13) How to create a wrapper or spacing inside CSS grids
6: (18:35) How to make CSS grids responsive
7: (19:26) The one drawback of using CSS grids
8: (23:18) A few more tips when using CSS grids

Links:

--

mmtuts is a YouTube channel that focuses on teaching beginner and advanced courses in various multimedia related skills.
We plan to make tutorials available on programming, video production, animation, graphic design, and on software such as the Adobe Creative Cloud programs.

HTML and CSS for beginners is a how to series that teaches the HTML and CSS coding language to people who are just starting out learning programming. The course teaches how HTML and CSS can be made easy and teaches "front-end development" which is the visual part of websites. Creating static websites with HTML and CSS is easy and should not be seen as otherwise, which is why we want to explain the language in a easy to understand way for beginners.

If you have suggestions on new courses, or specific lessons within existing courses you would like to see, then feel welcome to submit them in the comment section or in a private message. ALL suggestions will be seen, but not all will be replied to since we get quite a few every day.

[Dani_Krossing]

Hi everyone, I just want to say thanks for all the positive support you have given me when I announced that I was going to update and re-make a few of my courses. It has been a while since I posted an actual new lesson, and hopefully you will enjoy this one :)

[Kakaohunden]

This is pretty neat. Just bummed that I basically have to rewrite most of my CMS to use this, and with exams coming up in 2 months I don't think I have time for that. I will definitely try to start using this method on new projects.

[danielamare]

wow! I really appreciated to your tutorials! Thank you very much for sharing your knowledge in public!!! You are wonderful guy!

[hasukihusky]

You're a life|time saver !
Hoping for more tips and tutorials like this :)
Thanks :D

[surinfarmwest]

Daniel,

Brilliant and thank you very much for the easy to understand lesson. I was having problems with BOOTSTRAP and css grid as you know but now the fog has cleared.

A very happy Farm West. :-)

[nestor]

Wow, way way way simpler that the bunch of divs 😳 you just blew my mind. Thanks for this you are the man!

[sharifabahar]

Danial thank you a lot . Your teaching and video is excellent .

[zangovu]

You're a really good teacher. Thanks!

[lucasarif]

Yes - Another man of wisdom, using Atom

[abdullahmiyan]

So nicely presented :)
Thank you !!!

[ckc]

Love this one for sure! Thank you Sir :)

[Dexterx]

Just wondering at 5:22 you reset the margins using *px* when just zero will suffice

[Kramlets]

Thanks a lot for the video! Very helpful. :)

[alvinlu]

absolutly help full, as a student I really found managing the format is a pain :/ thx for the video!

[tuahabadar]

Thank you so much mmtuts, this was really really helpful, where is the link to the next video on how to style css grid.

[albertgalvez]

@mmtuts, I just noticed you put in dots on your template areas, and I'm sorry if you explained it already (new subscriber). I haven't seen those before.

[jakubkrumpoch]

Shouldn't you use viewport meta tag in order to display it correctly on phone? Resizing worked for me aswell, but for phone I had to use viewport.

[siriusgd]

I'm really having a hard time getting grid to work on Safari and especially Chrome. Works great on firefox. Any suggestions? Or do I need to pay on patreon first? If I need to do that, then let me know and I'll start paying if I'm going to get the answers.

[Kakaohunden]

Sorry for posting double comments. I noticed that you are using Atom in this video instead of Sublime, any particular reason behind the switch, or just wanting to try out a new editor?

[lukeheald]

Did u make the video How to style grids?