CSS Grid Tutorial #7 - Create a 12-Column Grid
Вставка
- Опубліковано 9 лют 2025
- Hey gang, in this CSS grid tutorial, I'll show you how we can create a 12-column grid using the CSS grid properties I've shown you so far. I'll also show you how to create a grid overlay so you can visualize the grid on the page.
----- COURSE LINKS:
Atom editor - atom.io/a
GitHub Repo - github.com/iam...
---------------------------------------------------------------------------------------------
Other tutorials:
----- HTML FOR BEGINNERS:
• HTML Tutorial for Begi...
----- CSS FOR BEGINNERS:
• CSS Tutorials For Begi...
----- NODE.JS TUTORIALS
• Node JS Tutorial for B...
----- SUBSCRIBE TO CHANNEL - / @netninja
============== The Net Ninja =====================
For more front-end development tutorials & to black-belt your coding skills, head over to - / @netninja or thenetninja.co.uk
================== Social Links ==================
Twitter - @TheNetNinja - / thenetninjauk
![Lp. Сердце Вселенной #60 РОЖДЕНИЕ ЛОЛОЛОШКИ [Финал] • Майнкрафт](http://i.ytimg.com/vi/YoR0pAV9FVQ/mqdefault.jpg)
I just want to point out to everyone that the latest version of Firefox (57) and Chrome (63) both now support highlighting and inspecting the predefined grid system within the inspector console. This will help move elements around your grid system very easily.
Stunning! Thank you for your generosity in showing us how to do this...and to create a grid overlay with check button! AMAZING! Thank you.
Thanks so much Louis! Glad you are liking the course!
Thank you so much the course is pretty cool I really like it and what browser is this please?
checkbox fro showing/hiding grid is freaking coolest trick I have ever seen!!!! WOW WOW WOW !!!! TNAKS!!!!
The checkbox to toggle the grid on and off trick was really helpful when comparing my static layout to the HTML. Great job on these videos!
I'm super proud of you to explain it so well and in depth ! Well done Shaun !
Net Ninja : makes sense ?!!!??
Me : hmmm(nodding)
Net Ninja : cool !!!
Here 5+ years later. The tutorial I was definetly looking for. Thanks
Awesome, hope it's helpful :)
Same, watching whole tutorial at 2024. Excellent content.
the best tutorials on youtube
Absolutely amazing tutorials. Never seen better explained this grid system!
you don't know how much I love your channel. thanks
Glad you enjoy it! :) thanks Mohamed
Hey Thank you for the tutorial. Exactly what I was looking for! To everyone confused. You can do a grid that is two columns or what ever you want. this is the most flexible way to make a grid.
Only think I would add is I follow the 1200px.com grid. So what I do is width 1200px, 15 columns, 20px, 10px margin left and right. I also set up my grids in Photoshop the same way using GuideGuide extension. This makes it really easy to think about how I will code it while im brainstorming and designing the UI.
Hey Shaun. You outdid yourself in this tutorial buddy. Lots of love from India. 💙
Very cool Shaun. Am enjoying a good feeling of success as I go along. You know a lot - and I'm grateful for you for sharing your knowledge. Thanks.
The grid lines trick is pretty cool. Nice to see one real example of css positioning accidentally :)
Thanks Shaun, you have the best front-end tutorials in UA-cam : )
Thank you very much. Very helpful!
Suggestions for future videos: a) PWA, b) PWA + Vue.js, c) PWA + AMP
Thanks Shaun, I am learning a lot from your tutorial series
I forgot to add diaplay:none; in the grid and for the past hour was thinking that what I did wrong, as the checkbox isn't working. Great tutorial man...
Thank you for give us idea of checkbox You are the best teacher
This video is gold! Thanks a lot!
You can display the grid overlay with only chrome dev tools,
> open dev tools
> beside the "content" id element you'll see "grid".
> press it and you can see the grid overlay on the page.
Really fabulous technique for checking accuracy grid system --- "heads off" Sir
the best tutor out here💌💌💌💌❤❤❤❤❤❤
Thank you! :)
I would like to know about your learning process wow. Really good
Awesome Tutorial. Love the checkbox grid feature. I'll be using that a lot.
Great little trick at the end, mad skillz as usual.
Bravo ..... Clear and Clean course as usual .....just small note to subscriber : donn't use (id) attribute to handle css stylesheet . use class .. id is attribute use with javascript .... our teacher ninja used it just as example ....
Thank you for your 'small note' - I was separating the style attributes into a separate css file and relating to this from the html. You took away my headache! Willy
Okay , thank you so much, this is perfectly explain!
Really awesome both you and this grid system!
this is 2021 in this reality and it's so relevant!
Epic tutorial series, man. Thanks.
7:08 *, chrome dev tools by default have a grid overlay, you just hover over the grid container in the elements tap and it will display an overlay.
Absolutely fantastic tutorial!
I have learnt a lot from your MODERN JS course on UDEMY. All your courses are just awesome. Sir can you make a course on how to implement payment gateway system..please.
"Give us this day our daily bread" ---- I took my today already on this video
that's amazing, thank you for sharing your knowledge
Great video as always, I would love if you did an updated React tutorial (and Redux)... one can dream though ;D Thanks for all the great work you do.
Hey - actually thinking of doing one of these in a couple of months. :)
You sir, are golden!
amazing. Very helpful
The overlay grid would not show up untill I changed the colour, I changed it to #F00D11. I also entered string 1-12 in the tags. Spent too long on figuring this out!!. Great tutorial though!
it's amazing bro!
Thanks man, it really helped me.
Brilliant, seriously brilliant :D
Thank you i learnt a lot from you.
CSS Grid (12-Column) so clearly explained. Thanks, Shaun
{2024-04-25}
you are awesome man.. whoa!
woo,great job!!!
thank you man, learned a lot :)
Again... BRILL
Hi Shaun, can we expect big udemy series from you, on any subject?
This tutorial is awesome, thank you! I have a question: I had some strange behaviour (I was experimenting XD) when I used "span 2" instead of "grid-row: 2 / 4" on ".main". Of course the "main" div was meant to be in row 2, so it went correctly where you had in the video, but everything else ("nav", "aside", etc.) shifted down instead of going to the left. Can you explain why that happened? Thanks anyway for your great work! :D
wow amazing!
Dear Ninja,
I am wondering whether you can suggest any resources about psudo selectors or siblings selectors like what you used here, in this tutorial. Same as :input:checked + #content #grid{...}. (y)
May I ask which Atom theme & fonts do you use? It looks really cool. This CSS Grid tutorial helped me a lot, thank you!
For some reason my section tag won't expand anymore rows but one no matter what number I end up putting in their. When I inspect it, it has many many tiny boxes inside of it as compared to the few tiny boxes the other sections have. I've made sure my code looks *exactly* like yours but can't seem to find what's going wrong! grid-row also doesn't change for footer, it only worked for main.
easy weasy gogogogogogo
respect teacher (y).
Shaun is Shikamaru! :)🥷
hey gang! what next series would be?
Omg thank you sir
input:checked + #content #grid{ display: grid; }
The most difficult thing so far!
Hey one question, when we define for ex. 12 column it would be also 12 rows?
Thanks!
Hello there, Thank you so much for this very helpful tutorial.
I just have a question, maybe is not a good one, but when I finished building the whole grid layout in this example, I got some white extra space all around the grid, I have been searching for an answer, but I can't find one... Is it perhaps part of the grid?
try margin:0px
@The Net Ninja , Thanks for this awesome tutorial , But what i want is to stick the footer to the bottom of the website irrespective of the device height or browser height . So that when i have much less content the footer don't stick up with other content and look awkward. Please provide a solution using css grid . :)
thank you very much :)
what is the name of your theme btw? I have dark theme but not the same one.
can you explain the >* for direct descendants?
Sorry for being thick, but what i don't understand is, why make a 12 column grid when a 2 column grid will do? Will welcome any and all replies.
Hey, it's thck at all. Imagine you had 3 elements spread over 1 row on a page. You can distribute them however you like over however many columns you have. For example, 1 element could be 2 columns wide, another 4 columns and the last 6 columns. As long as they all add up to 12 it's fne. So basically, 12 columns gives you much more flexibility than 2 :).
What is content div displayed relative to, and why?
thank you very much sir .for making these 10 videos for us.
we really neded these. specially i neded a lot.
thanks onece again!,
why do i need visibility sir....?
Will there be some kind of website example at the end of this series?
Not a website, no. But I will be doing a site build using grid in the future :)
Need help! Nothing changes after I type grid-template-columns: repeate(12, 1fr); Not sure what i'm doing wrong.
this is what I have written.
Using CSS Grid
body{
color: #fff;
font-family: 'Nunoto Semibold';
text-align: center;
}
#content{
display:grid;
grid-template-columns: repeat(12, 1fr);
max-width: 960px;
margin: 0 auto;
}
#content>*{
background: #3bbced;
padding: 30px;
}
Header
Main
Section
Aside
Nav
Footer
Watching this in the middle of work to understand what i'm doing 😅
Haha, did it help? :)
definitly @@NetNinja
how safe is it to use this compatibility wise??
Why is my grid overlay not taking the full width of the id content
What do we gain from this 12 columns that u created !?
Thx :)
which font are you using in the editor?
atom.io
Why not use body as a grid container?
I would have to agree with 'Thin Soldier'. A lot of time and coding would have been saved to just use Firefox. Your tutorials are very good and clearly explained. I use Firefox for coding and then I will compare in other browsers. Great job.
can you recreate bootstrap grid system all from scratch using grid & sass
Great series so far. A bit too fast on the delivery for those of us learning through following along tho in my opinion.
#content > *
{
background : #3bbced";
padding: 30px;
}
the above css code basically says apply background color of #3bbced to every child of the div with id = content. However, let's say you added p tags inside your main tag or say you added h1 tags inside your section tag (to the html code in this video). Then these p tags or h1 tags will now be grandchildren of the div with id= content. But why do they also get applied background color of #33bced if they are not children?
how do u make your grid responsive?
you have to set media queries, so that you page reacts when the screen is a certain amount of pixels
media query
at the beginning it don't look like 12 columns grid, why is that?
Thank you for this lesson. Please help, how to make footer all time in the bottom of the page with css-grid?
For this, you'll need to use a positional css property too - position: fixed. Then a bottom property of 0. This will set whatever element you give those properties to be fixed at the bottom of the page.
and here is not important columns and rows?
why would we create DIV and style it, cannot we simply style whole BODY? it can work as being grid and all other, isn't it pointless another container?
There are no files in the repo
Hey - you just have to select the correct branch for each lesson (top left, drop down on the repo) :)
that would have been great - if it worked
holly shit
too hard Im droping from CS course
As long as Firefox has a proper grid inspector and Chrome does not I can't take a grid tutorial seriously if it isn't using Firefox. The last 10 minutes of this video is a waste of time compared to showing the great grid inspector in Firefox or at least the work in progress Chrome add-on that tries to do the same thing.
You quite rightly point out that the grid inspector in Firefox is great. Nevertheless, I don't think the last 10 minutes are wasted. On the contrary, I find it quite interesting to see what else is possible with the CSS grid.
Couldn't agree more. Too bad it seems nobody knows about it.
what if you're a Mac user?
can you just appreciate that he is doing all these amazing tutorials for free ?
He never force you to watch the last 10 min + i dont think it was waste of time to know how you can make a grid inspector by yourself .
If you you dont like something that someone does very good (like Net Ninja and many others) for FREE, please dont brag about it.
Instead you can brag to people that you payed for and you didnt get what they offered.
Thanks!
Amazing!
Amazing!!!