Why CSS grid-area is the best property for laying out content
Vložit
- čas přidán 3. 08. 2024
- CSS Grid is amazing, and grid-area just make it so much better. When grid first launched I loved the idea of grid areas, but didn't get fully on board as it seemed like a little too much work... but once you start actually using them on a regular basis, you realize that while the initial setup in slightly longer, in the long run you can save a boat load of time!
Join the party in the community: / discord
The code from this video: codepen.io/kevinpowell/pen/qL...
CSS-Tricks article on autoprefixer and grid for IE: css-tricks.com/css-grid-in-ie...
---
I have a newsletter! www.kevinpowell.co/newsletter
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my CZcams channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
Your shirt is a reminder of css grid too! And one the buttons is unbuttoned!🤣
4:45, 6:16 => grid template columns & grid column;
7:19 => grid template areas;
13:57 => firefox;
17:19 => the reason why you want to use grid template areas;
Thanks for making timestamps! It's a huge help for me when reviewing.
i'm falling in love with CSS again. it used to be a full on nightmare trying to do layouts back when i first learned but HTML and CSS is awesome and i'm getting into Sass too so really digging your vids.
CSS grid is a massive improvement! 👍
Hey Kevin,
thank you very much for bringing me GRID-AREAS closer. I was approaching the same way like you, thought, I don't need the areas and can work around it. But you showed once more, how easy it is, to use them in an easy way! AWESOME!!! Thank you, Kevin!
Wow this really shakes up my whole design process. Thank you for making this video!
Congrats on 50k subs, Kevin! I'm on this channel since it was 10 times smaller and It's great to see how it is growing! You have your own special atmosphere on the channel. It really feels like you want us to understand the subject. It's motivating. Thank you so much!
Thanks for sticking with me for so long!
Now its 10 times larger
Hey just a reminder , now it's another 10x ... Kevin Sir deserves this , he is a great teacher🔥
You are doing just Great! We are with you.
That is the best explanation and minimalist (in a good way) video tutorial about what Grid Areas I've ever seen. I wish I could give you 100 likes. Thanks million Kevin for your work!
I've watched several of your videos, I feel I'm starting to love grid. Thanks! Nice job
As a supplement, check out Jen Simmons. She is more theoretical but does also give a good idea what way you can think when employing grid.
Just came across your content and I want to say that you're doing a great job explaining each topic; thank you!
Recently learnt about grid areas and how to use them. This video really helps me understand clearly how it all works! Thank you so much, definitely subbed! 😁
Glad you enjoyed it enough to sub Ben!
Your not the only one! I'm also in-love with it!
Love the vid Kevin. You re-sparked my interest. Thanks!
I was holding back the use of grid feature because of browser support. But I see now that 90% of browsers in the wild have support without prefixes so I start using grids in production now.
You are talking about having 50k subscribers in January and now look at you with over 95k!!!Go, Kevin, Go!!
Hi.. I keep watching most of your videos.. Thank you for making me love CSS ! i had no idea before what is CSS or HTML. After a few class in school i found out your channel and keep learn new thing every day !! thanks for videos
Finally decided to learn CSS grid today and after seeing this and playing around with it....wow grid areas!! So awesome!
Great video, grid-areas are very handy. I learned many things from this video and defenetly going to apply them in my next project. Subscribed.
Glad you learned a few things, and welcome aboard!
Recently found your channel, really enjoy the content! Keep em coming ^^
you are my go to resource for UI development. Thank you so much!
Great content Kevin. Thank u!
I love your videos! I have learned so much from you. I am currently taking a CSS class online from a university, and I often use your videos to help me understand many of the topics better, such as Grid and Sass. Thank you so much! When I am done with my university classes, I am going to take some classes from you to improve my CSS skills.
Kevin Powell having 50k subscribers in January 2017
but right now 17/4/2021 look at it over 247k!!! Go, Kevin, Go Go !!I love you.
I came from THAILAND
2024 and 913K
@@narenprakash6732 Before the end of year 2024 I think it should 1M ++ subscribers (Sure Sure)
50k is not good enough...you deserve 500k subs!!
@Keytron Quabius yeah I guess you are right. What you said..the same thing thing happened to devtips. It became so big..That Travis couldn't manage it, felt burnt out and decided to leave the channel. Now the channel is just a shadow of its former self
If you guys haven't joined us over on Discord I recommend you do 😁. Even if I can't keep up with everything here as much, I figure it'll only be a small fraction of the audience over there, which will help keep some good discussions and stuff going 😁
On youtube it really is just a matter of time. Maybe one more video a week would increase your views. Why don't you ask us what we need to know. It's a great way to tune into your audience.
I'm always open for suggestions Adolfo :). And 1-2 videos a week is good for me. It's nice to grow, but it's not what I do it for :D
Nikhil Tyagi i second that👍
Great videos! Thank you for doing them.
I hope I remember to come back to this exact video when I move onto the responsiveness of the site I'm working on. I love your videos! Thank you so much! It's really difficult coding but I'm really really getting a hang of it thanks to you
Just a warning, it's harder to add responsiveness after you write your css than before you do. The sooner you do it the better.
Now I love grid areas. Thank you Kevin.
I loved the video and also the sass part. So neat and organized
Thanks Kevin! As always you have helped me better understand and implement CSS
I'm learning from you man. keep it up . and that real example was great
Nice video! I think I'll start using grid-area as well, I also thought it seemed tedious to do it that way but this proved it wrong haha.
Great explanation as always. Thank you
Excellent as always kev
Kevin, you correcting you screen only - only screen error helped me fix a problem I've been having with media queries for a week.
Just subscribed to your SASS Scrimba course after you gave a peek in this video, it looks fantastic, I am v excited
after that I will use the grid in my projects. Thank you very much for the video.
Awesome, glad you liked it :)
I love grid areas. No matter what, it just works. Edit: great channel man, subbed.
Watching this now and you have 671k subs to date in only 3 years lol.. congrats!
Here from yesterdays video. This was so helpful! Subscribed!
Loved your content. Thank you.
I can't believe that a year ago I was using floats and margins for all of my layout needs, it's crazy that with your tutorials and a few personal projects I've improved so much already
Using Ditto will save you so much time and trouble when copying stuff :D
Love your work! Keep it up! :D
congratz on 50k ! lets go 1mil goal now !
You are the best CSS Tutor/guide/ teacher/mentor on YT
At the end of the video. I was like.... Ooookkk??? Hahaaha. It went too fast for me. But I would say that you're a great teacher. Thanks for sharing always
Sorry if I went a bit fast, I'll eventually do a CSS grid for beginners series or something that really goes through the entire thing nice and slowly :)
Likewise! Feel like I’m back to square one again lol.
I am a beginner and building my first website. This is great because I keep changing my layout. It is simple. Thank you so much. I will also give you credit. 🤗✌😉
50k subs 2 years ago. Now it’s over 300k that’s pretty good. 🥳
thank you so much this is amazing.
I do the same thing! I have a big sass file with a bunch grid-template mixins. Each one takes arguments for the name of the objects and the alignment/margins. If you don't pass names in, they use a "standard" 4 letter codes for area names. It makes uniform responsive components so much easier. Sass is great. I can get carried away.
I love how your shirt has display: grid;
you are a God - thank you for this it has saved me so many hours
11:46 [Win + v]
p.s.: Thank You for new knowledge.
L.K.
Kevin: I planned a 50K video. Community: Not its worth 500K. Thanks for the great tutorial as you help to clearly explain CSS concepts.
Title says "Grid-Area" but tutorial initially talks about "Grid-Template-Areas". Came here looking for the former one, which is way more compact. Happy to see it appear around 14:45, but not the 1 / 1 / 2 / 4 type I'd hoped to understand better.
much love from someone who hates UI , i think you make me love css now
Your button was undone and it was driving me insane haha!
I've loved css grid since it rolled out last year. I have a lot of anxiety (as you mentioned) about browser support.
Bootstrap 4 is still my layout framework of choice (as well because of the added dynamic components)... And I have used them both together.
Anyways... I'm going to check out your discord. Thanks for your channel!
I used to use Bootstrap or Angular Flex-layout on my projects. The only reason moving to Flexbox or Grid is that I don't want to layout the pages in the HTML files anymore. Even Google is dropping their Flex-layout package from Angular v15+ for the very reason of Separation-of-Concerns. Honestly my HTML files look very nasty with those Bootstrap or Angular Flex layout commands. I'll be using their components from now on only and no more styling.
4 years later Kevin is at 758K ;)
Well deserved
I'm going to be moving my personal project to grid starting in February thanks to your videos!
Very awesome Steve! Have fun, it's great to work with (IMO anyway)
I enjoy your videos in Japan!
I figured I was already subbed to you as I watch at least 5 random videos of yours each week... Turns out I wasn't but now I am. This was when you had hit 50k and as of this comment, it's 73k!
Glad you've been enjoying them enough to sub! Things are growing here every day, really exciting :D
Good content gets you subscribers. Keep up the good work!
kevin that awesome i wish i could be like you or more than you, but any way am on it thanks bro you are doing absolute great me and my brother love your stuff.
I use:
@media screen and (max-width: 860px) and (orientation: portrait)
for the case where the areas stack in a "column" because when the phone is turned to a landscape orientation it is able to display main and sidebar side-by-side just like a desktop (and doesn't require a media query) but "width" is the smaller of the two dimensions of the phone regardless of which way it is held.
I don't have that experience with mobile devices....
Video starts at 2:15
Yeah if they could put that at the end of the video would be great.
holy bloatware batman
thx
Damn I read this at the 2 min mark lol
I saw it immediately and saved 2:15 of my precious life... ;-)
KP: "...we hit 50,000 subscribers." -- I'm watching this and you have 664k.
Greatness shines!
Congratts on the 50K Subscribers!!! Thank you for the videos. Make a 50K layout site!!! lol
Passed 100k now 😁
I wish I had more time to build out something special to celebrate
Awesome content :)
I wish I could convince my coworkers to use grid, but since we use react with material ui it makes more sense to stuck to flex since that's what that uses
Amazing channel
Amazing videos
I'm obsessed with grid-area also! it made css grid for click for me within 5 minutes and css grid is like my baby
Thank you Kevin for reaaaaaally excellent content :)
I would use grid-template-area if I have a finite set of elements to manage ... Otherwise (for example a random set of cards, e.g. in e-commerce websites ... ), I would go for grid-template-rows/columns ...
keep at it sir;)
Thanks for your good works, Is it advisable to continue using grid though is not supported by all browsers. I love your videos
loved it, Thank you Kevin (=
A few tips for you: 1) use a clipboard manager like Pastebot and set it to show previously copied 10 items when you press cmd+shift+v 2) Use TextExpander to expand commonly used stuff like the media query declaration. You can even have the text cursor go to where the number should be.
Thanks for the suggestions :)
Watching your vids always reminds me of Le Tongue
What tools do you use to build websites? Would be awesome to see a breakdown of your workflow and tech stack from start to finish.
HTML editor (whatever stuff highlighting syntax), browser and Gimp for images should do, I rarely use anything else ... but would be interested too as I may not be superbly productive. Especially as I only have an idea in my head and a rough sketch and do not bother with any Adobe stuff (or whatever you use to make a visual draft).
Ok brother they're awesome
Hay, cool tutorial in your experience what would you say would be the way to manage comtent (i.e update articals and add new ones) for a web site you design your self?
Hi Kevin I’m learning web development but really confused as there is css and bootstrap. Was wondering if companies want you to know bootstraps and use it for project or they want you to write codes from scratch without the use of any libraries. Ur videos are great and informative. Just found out recently and I’m watching every video. Thx man keep up the good work and plz elaborate my confusion hope you can help me
Hello there.
I just installed your code editor, this is awesome! Thanks!)
thanks for the video
0:05 not sure why you looked like Joey Tribbiani for a second lol
great!
Subbed
First 9 seconds is epic 👌😅
Can't wait for Subgrid to finally get launched, hopefully soon :)
I'm happy it shipped without it, so that they could ship it as fast as possible... but yes, subgrids are going to make life sooo much easier.
@@KevinPowell I wish they also allowed animation of grid layout changes.
@@ralexand56 can animate grid-gap
@@hughslooskant4420 really?
@@hughslooskant4420 Unfortunately that's all it can animate.
Hi I'm new to this channel and it's easy to learn with you. Hope you post a crash course about html css and js.
I have an HTML & CSS crash course on Scrimba that's free :)
scrimba.com/g/ghtmlcss
thanks you i started to use @supports(display:grid) {} and now my websites are much more effective. they display grid or flexbox, which i autoprefix earlier. there is no chance that even explorer breaks the layout now :D but ofc im waiting for grid to be supported by every browser, it would be 2 times faster to build layouts with it
Wow man, we have 132k subscribers.. I'm so glad that we achieved so much in our life :D
Oh boy a mention of 50k, homie is nearing 300k now. How things progress in such short time
Hi Kevin, thanks for your wonderful videos. I have been trying to find the video you did on the "Travel Food Fun" website mentioned in the "Why CSS grid-area is the best property for laying out content" video . If you could point me in the right direction that would be good.
So, unfortunately i came along after your sass course and i was unable to check that out. Do you have any plans for other courses in the future? The responsive web design bootcamp was fantastic.
I prefer flex-boxs. I mean, it depends on the use tbh. I use a lot more horizontal stuff so it easier to use flex boxs with different flexs
I find I'm using grid more and more thanks to stuff like minmax(), grid-gap (coming to flexbox!) and the fr unit
Flexbox needs to have flex-gap just like grid-gap
Hey Kevin, what theme and fonts are you using in this VS Code?
it feels like Atom!!
CSS grid is dope
thx
0:07 seconds.... convinced.