Why CSS grid-area is the best property for laying out content
HTML-код
- Опубликовано: 25 июл 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 RUclips channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
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.
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🔥
Your shirt is a reminder of css grid too! And one the buttons is unbuttoned!🤣
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!
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!
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.
You are doing just Great! We are with you.
Just came across your content and I want to say that you're doing a great job explaining each topic; thank you!
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.
Love the vid Kevin. You re-sparked my interest. Thanks!
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!
CSS grid is a massive improvement! 👍
Your not the only one! I'm also in-love with it!
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.
Recently found your channel, really enjoy the content! Keep em coming ^^
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.
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 content Kevin. Thank u!
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!
you are my go to resource for UI development. Thank you so much!
Just subscribed to your SASS Scrimba course after you gave a peek in this video, it looks fantastic, I am v excited
Great videos! Thank you for doing them.
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.
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
Excellent as always kev
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.
Kevin, you correcting you screen only - only screen error helped me fix a problem I've been having with media queries for a week.
Now I love grid areas. Thank you Kevin.
Great explanation as always. Thank you
Here from yesterdays video. This was so helpful! Subscribed!
Loved your content. Thank you.
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👍
You are talking about having 50k subscribers in January and now look at you with over 95k!!!Go, Kevin, Go!!
I love grid areas. No matter what, it just works. Edit: great channel man, subbed.
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.
Using Ditto will save you so much time and trouble when copying stuff :D
Love your work! Keep it up! :D
after that I will use the grid in my projects. Thank you very much for the video.
Awesome, glad you liked it :)
congratz on 50k ! lets go 1mil goal now !
Watching this now and you have 671k subs to date in only 3 years lol.. congrats!
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. 🤗✌😉
You are the best CSS Tutor/guide/ teacher/mentor on YT
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)
you are a God - thank you for this it has saved me so many hours
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.
thank you so much this is amazing.
Good content gets you subscribers. Keep up the good work!
50k subs 2 years ago. Now it’s over 300k that’s pretty good. 🥳
much love from someone who hates UI , i think you make me love css now
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.
I love how your shirt has display: grid;
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)
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.
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 ...
Amazing videos
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.
11:46 [Win + v]
p.s.: Thank You for new knowledge.
L.K.
4 years later Kevin is at 758K ;)
Well deserved
KP: "...we hit 50,000 subscribers." -- I'm watching this and you have 664k.
Greatness shines!
loved it, Thank you Kevin (=
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
I enjoy your videos in Japan!
Hello there.
I just installed your code editor, this is awesome! Thanks!)
Amazing channel
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
Your button was undone and it was driving me insane haha!
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
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
Thanks for your good works, Is it advisable to continue using grid though is not supported by all browsers. I love your videos
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
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... ;-)
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?
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....
keep at it sir;)
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 :)
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
Kevin: I planned a 50K video. Community: Not its worth 500K. Thanks for the great tutorial as you help to clearly explain CSS concepts.
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
Watching your vids always reminds me of Le Tongue
great!
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.
hi kevin. what is your visual studio theme?
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.
Hey Kevin, what theme and fonts are you using in this VS Code?
it feels like Atom!!
Bit confused about how to apply a 12 column grid with css grid.. cam guidance on this?
Thank you.
thanks for the video
0:05 not sure why you looked like Joey Tribbiani for a second lol
Hi, great video. The code on codepen has a little bug. The sidebar column has a fixed width and therefore a scrollbar is visible
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
Subbed
CSS grid is dope
I have created a sports website with lots of pages and redesigned my home page using grid areas - header, side nav and main content. In the side nav I have all the links to my web pages. How do I set it so that when I click a nav link the page shows in the content area of the home page?
First 9 seconds is epic 👌😅
Does your new sass course show how to build a website using grid and sass?
thx
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.