CSS Grid Tutorial #9 - Grid Areas

it's even prettier if you make all the grid area names the same length

I wonder how the template worked correctly with the spelling error on line (13)

Excellent tutorial as usual but how is it possible to have an error in the code and get the grid to still show up as normal? Error on line 13 "gird-template-columns" again GIRD in case no one reads character by character...

I can't see shit

CSS Grid is great compared to the old float and clear but I really don't see the point of grid areas, using grid-column and grid-row seems much easier and less typing. But I'm a newbie so may be missing the point.

Question: Is there anyway of using repeat(4, main) or something in the grid template areas, rather than writing out main 4 times to signal it spanning the whole width of page ?

Hi Net Ninja,

I just want to say thanks for this tutorial series of Grid, you have taught me a lot. I have a few questions to ask you, would you recommend using CSS Grid over Flexbox?

If so do you have another series on CSS flexbox and maybe a responsive design series as well so I can make my website suitable for mobile users as well!

Thanks in advance!

Edward :)

I don't like you Net Ninja

CSS GOD, let me worship you with all my divs 😭❤️❤️♥️😍

that's fucking awesome

Thank you! i've watched quite a few tutorials on css grid and this made it all click finally!

When I watch a video from your channel, I become an automaton! Because instantly I smash the like button!

Checkout his flex box series also . It’s also awesomeeeee.....

And it all worked with "gird-template-columns" hahahaha

Amazing tutorial series for newbies learning CSSGrid

I didn't see the point of grid-area until this tutorial. Great job!

Thank you very much

grid is life changing!! Still I don't know how you make it work with that typo on line 13? that blows my mind even more... jajaja

the moment i have grid area to each element they all overlap over each other. can you tell me whats going wrong?

what if you have three columns and one item takes up double the column width as the other two?

aw man thanks a lot, this takes a lot of stress away for a newbie

re gird

As someone mentioned, you don't need that line. What I would guess is that once he added the "header header header header " it assumed the 4 columns. Notice that when he first added the "gird" line and refreshed, it didn't show 4 columns. ;)

In line 13 you wrote gird instead of grid. So it should not work...

So simple! Thnak you :)

thank you♥♥

Damn GRID is amazing !

Danmm I nvr know this awesome way .Thankz ninja!!!! Its so easy.

In the 13th line of this code you have used gird instead of grid,is that right? I'm a bit confused how it's working with that name

how to position things inside the cell? for example how to put the header in the left-top side ?
or main in the right bottom side?
also when I use text-align: left or right that changes the whole grid.

please help

it's amazing! Never knew constructing site can be so easy!

no code files on github link😁

When i try to adjust the height/width of the nav for example, there is always a space left. How do i control the width and height? Do i have to make more rows and coloumns?

*GIRD

Superb..Thank you

sincerly speaking, am wondering how the css is able to run perfectly yet you have a spelling error of grid as "gird" at line 13 maybe well viewed at the 7 min of the video run time. anyways, am not getting the expected output even with a correct spelling. I can't figure out why

King!

The devs who made this are heros. You're one too.

You've just described GRID-TEMPLATE-AREAS. Came here looking for GRID-AREA explanation. Big difference.

this series is awesome! Thanks for all of this :) Quick question: is it best to name grid elements (and use grid-template-areas) or to use the grid-column and grid-row to position elements? Or in which scenario one is better than the other?

✨ gird ✨

The gird is not the same as grid,so it ignored creation of 4 grid columns

To everyone that commented 4 - 5 years ago, are you now a standard programmer?

Really amazing tricks...

Nothing made me front end work than dealing with CSS layouts, but you've made grid look easy, Kudos Bro

Thank you , you explained well, this woulb be helpful

CSS Grid Areas, beautifully and clearly explained. Thanks, Shaun.

{2024-04-24}

stacking rows with the same values doesn't seem to be working on my side :/

If you notice, you mispelled the grid-template-columns: repeat(4, 1fr). Instead of grid, you wrote gird on this video Grid Areas. However, the desired results were met and that is freaking awesome and amazing. You saved lots of people right here.

😮