Probably the most underrated (and useful) CSS feature
Vložit
- čas přidán 18. 05. 2024
- Looking to step up your CSS games? I’ve got free and premium courses to help you out! 👉 kevinpowell.co/courses?...
I don’t think I’m alone in not using named grid lines very often. They are something I dismissed early on because I figured line numbers were good enough and faster to use, and if I wanted named stuff, I’d simply use grid areas instead.
Plus, having lined names makes for ridiculously long declarations.
Despite that though, I’ve seen the light and in this video I’m going to do my best to convince you that you should be using named grid lines by going through three awesome things that they make possible, each one being cooler than the last… or at least I think so!
🔗 Links
✅ The video where I explored the first example in a lot more detail: • A new approach to cont...
✅ A simpler look at grid line names: • CSS Grid - Using line ...
⌚ Timestamps
00:00 - Introduction
01:07 - A simple example
02:07 - Easily break out of sections with line names
04:07 - Double naming lines makes it even better
06:46 - You can make overlapping grid areas with line names
14:36 - Line names and subgrid
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
![[Vowel]물고기는 물에서 살아야 해🐟🤣Fish have to live in the water #funny](http://i.ytimg.com/vi/3G9MH063Cx4/mqdefault.jpg)
"I don't have to touch the children any more," - best out-of-context quote of the day. 😅
Immediately stopped the vid to check the comments for this! 😂
That is the best comment on any KP video… EVER! And Kevin, once again, has managed to pump out more great content.
I’m glad he has understood the impact of his past behavior and is turning over a new leaf. NO MOAR TOUCHING
There's also "I can come on something" (1:34) and "we've made our long things even longer now." (5:01)
Kevin, thank you for showcasing all these good use cases for grid over the past few years, even when it wasn't well-supported in modern browsers. For the longest time, I avoided learning grid because flexbox was sufficient for me, and grid felt too complex to learn at the time.
Now, as I work with more complex layouts, revisiting your years-old tutorials on grid has significantly made things easier for me. Even newer videos like this one make me reconsider how much time I could have saved by using grid in previous projects if it had better support. Thank you for your work!
I'm curious: CSS Grid is supported since 2017 in all major browsers. Why have you been reluctant to give it a try? It's not either flex or grid. I sometimes even use floats if it makes sense.
Did your projects have many users using IE11, Opera Mini, UC and Baidu browsers?
@@CirTap OP already said the reason was that it "felt too complex to learn at the time". Also I don't think all grid features have had browser support for this long.
This is one of the most useful videos/articles about css grid I've ever seen. Not only the part about named grid lines but how you've set up everything to better fit those common design patterns. Briliant
This is the most amazing things I have seen since the first video you did on the subject, and I am now rethinking a layout I am working on at the moment.
This is great, I can almost feel your excitement. 🤯 I saw the previous video where you mentioned named lines, but this takes it into the stratosphere! Totally mind-bending. Thanks.
You really do know the pain points and well-suited solutions for them. Thanks Kevin, we're lucky to have you 🖖🏻
Thank you for sharing, Kevin❤ I’ll definitely be playing around with this technique😁
This is incredible. Thanks for sharing!
Been using named grid areas couple of weeks and is life changing. It’s a big reason to completely drop bootstrap grid (which is a solid solution tbh). There must have been a button in this video to give 1000 likes each time is pressed. One like is very little for that kind of information
loved the video. It's funny to see you really amazed by what you are explaining, it shows that you really have passion for it.
I'll be waiting for the next video!
Amazing video! Something that I had to go back and re-watch before I had my "Ah ha" moment and fully got what you were talking about is how, by defining both a grid-template-columns and grid-template-rows meant, on the children, you can use grid-area to declare where they should exist on the grid. As opposed to before when you would just use grid-template-columns to give the column grid lines names that you would use with grid-column on the children to tell them what columns to span.
Such a great feature of being able to create overlapping grid areas by combing grid-template-columns and grid-template-rows with named grid lines 😍.
This is so powerful. Thanks for sharing!
Great info! Thanks a lot! I'm sure I'll implement this in my next project.
Great features, love it! Thank you!
Love it Kevin! Looks super modern!!
Awesome explanation Kevin 👏
I've used numbered grid columns in a similar way to lay out form elements and labels. Text inputs need the label above them, while checkboxes need the label beside. By having a far left column that can collapse to nothing, I'm able to optionally put a checkbox in it and change the order of the label. This _does_ assume a separate grid for each form element though.
I'm working on an insanely complex responsive form that covers like... at least 50 routes on mobile and only 6 on desktop. It goes to a native mobile UX to a massive multi-tab monster with editable grids of content. The current implementation is awful, and I started to look at how to improve it a few months back. It's the core of my current project, so it's not an easy task.
I watch your subgrid video, then thinks "Oh that's cool! I can use this to help me line up all the form elements even if they cross component boundaries and do something nice and simple!"
And then you pull this insanity off... First, you point out that multiple overlapping grid line names are a thing, which obviously makes me go: "Oh! If I combine this with subgrid, that will make it super easy to make my form responsive."... And before I'm even done thinking about the idea, you've already done it and proven it works! You absolute mad man. You're a genius.
These two videos just saved me days of prototyping and research.
This is one of the coolest css features and only recently learned about it
I am not just getting knowledge but enlightenment. Thank you lord Kevin! 🙇♂
This is actually really useful for me, because this is exactly what I need for my websites.
Been following for years brother! I have a new website to deploy and I'm going to use this for prod! Thanks my friend!
i also started to do this, after your video about those
I am a huge fan of slower :)...Really appreciate your channel.
Another tool in my CSS toolbelt, thank Kevin!
Also don't know if you mentioned it but you can actually overlap grid areas without this syntax for example you could have done.
.background { grid-area: background / text;}
.img {grid-area: img / background;}
Yeah, I just find that more messy in a way. I donno, I like being able to say `background lives in the background grid ara` and leave it at that, lol.
this is gold
Finally I understood why your speech is so fluent and quick, you read that text :
Love the t-shirt!
Love it. This has me wanting to fix an old grid that I have that has some frustrating aspects to it. I'd love to see the source file on the 2nd example. There's a lot going on and it goes by so fast, and it'd help wrap my head around the entire example. Is this up anywhere?
I'm a new Front-End Web Dev and your videos have been absolutely SAVING me, they are very well-thought-out and easy to understand, all packed with so much info. I will continue to use all your resources and do my best to become a better web designer. Thank you and for what you do, Kevin!
That's super useful. One use case is how discord breaks out thr profile picture for message outside of the container. They use position absolute but this is a better way
Dunno about sleeping..... But I cannot unsee this! This is very close to event horizon insight in Interstallar.....we got the data back and know how to use grids 👍💪👍
Watched your foundation video last night, this is the perfect follow up! Would love to see more of this method as it’s a bit of a gem for layouts!
Once you get how it works there’s loads of possibilities.
You're killing me, SMALLS! LOL! Love it!!!!!!!!
Nice video :-) It would be nice if these grid lines could actually be animated or at least I haven't figured it out yet :-)
Hey Kevin,
Is it a good idea to code our pages with just going through “header > nav > ul” or just creating “.unordered-list” class for it?
I actually want to know, when time to use tags, classes and IDs. Because, we can use ID as class too _but not class as ID._
There are different schools of thought on this one, for sure. I have a tendency to do something like `.primary-nav` on my nav element, then do `.primary-nav ul` and `.primary-nav li` etc. Some people like a single class for everything. Some prefer sticking with regular element selectors when possible. Using classes is the most common way, though.
I'm not sure what you mean by "we can use ID as class" though?
Most of the time, I often add meaningful classes and IDs to tags and use them in JS and CSS.
It might be too much work but trust me, it will pay off.
I only use tags to reset default declarations. IDs for unique elements or groups of elements.
Classes for everything else. Just remember to name them properly and KNOW what you are doing.
Ofc you can use them mixed but it will get messy soon or later.
P/s: NGL using tags only is such a pain in the ass.
Another tip for you. Never add "!important" to your CSS rules if you don't need to. Learning about the priority of elements, groups of IDs and classes will help you never use "!important". It can even overwrite the "!important" :D
@@zorokutendi was wondering like, if we use two same id names for different elements; they still work as classes right?
I am using tags, cause finding name for my elements is 😢
Thanks!
Thank you so much!
5:50 Physical embodiment of 🤯
10:57 Full stop
This has been the reason I haven't been able to use Tailwind in my most recent projects.
When we start using grid named declarations, it becomes impossible to write this type of rule with the utils classes, and everything becomes very confusing if you mix simple utilities like "grid" in the HTML and write the grid declarations in the CSS file.
Rumor has it, some of us are still reading that one line of CSS.
You should do a reaction video of a backend dev watching this video haha
only a few minutes in and this is a lean mean solution. Wow.
This is how I've been playing with this idea based on the videos I've watched. Some conventions like the use of _ for some of my custom properties, among other things might not be right. Would love anybody's thoughts? The global-grid is like a wrapper around my header, main, footer. and give my header, main, footer the content-grid class so they inherit the global grid columns. Which allows me to utilize it with tailwind like this ` className="[--grid-column:6/span_6]" ` in order to get an element to sit on a particular line. Not sure if subgrid is needed for this or if im just complicating things?
.global-grid {
--_breakout-size: calc(
(var(--breakout-max-width) - var(--content-max-width)) / 2
);
--_column-size: calc(
min(100% - (var(--global-padding) * 2), var(--content-max-width)) /
var(--column-count)
);
--global-padding: 1rem;
--content-max-width: 65ch;
--breakout-max-width: 80ch;
--column-count: 12;
display: grid;
gap: 1rem;
grid-template-columns:
[full-width-start]
minmax(var(--global-padding), 1fr)
[breakout-start]
minmax(0, var(--_breakout-size))
[content-start]
repeat(var(--column-count), minmax(0, var(--_column-size)))
[content-end]
minmax(0, var(--_breakout-size))
[breakout-end]
minmax(var(--global-padding), 1fr)
[full-width-end];
}
.content-grid,
.full-width {
display: grid;
grid-template-columns: subgrid;
grid-column: var(--grid-column, full-width);
}
.content-grid > *,
.full-width > * {
grid-column: var(--grid-column, content);
}
.breakout {
--grid-column: breakout;
}
Hello Kevin, please do you have any tutorial on javascript?
I would definitely enroll if you do have one, cause I believe you will be able to explain it more clearly as you do with css.
I have a few videos here and there (last week's view transition one, for example). I don't focus on it though, mostly CSS. I do have plans for *something* related sometime next year though :D
@@KevinPowell Ok. Keep us 📫 posted
Looks very promising and I really like this approach!! However, I've been struggling to get it to work for several hours now and in the end I gave up. The CSS is simply too unmanageable for me..
named-grids
are are are are
great great
:)
I like to name 'grid-area's then layout grids using just their names with 'grid-template-areas'. repeating where necessary.
ima bout to replace a lot of hacky and shitty CSS at work tomorrow with this 🔥🔥
I think this is quite a cool concept but I think it might be a bit over engineered, I think it’s easier to build layouts using utilities such as tailwind instead of the extra overhead, but for more complex and bespoke layouts I can see where it could be useful.
I'd love to use grid instead of my floating columns, but sadly, you'll need the least common denominator. And while for regular systems a 12 column is good enough, you cannot make a 1/5 columns and this is something that I really do need. For a grid that supports 1/3, 1/4 and 1/5 columns, I would need 60(!) columns :D
Unless I'm wrong, a grid system supporting 12, 5, and 3 column layouts would only need 15 columns (1/4 cols and 1/3 are included in a 12 col layout). If you were to name the lines too you'd still have a relatively intuitive system that could mix and match divisions: `.first-quarter { grid-column: c1-d4 / c2-d4 }`, `.halfway-to-third-fifth { grid-column: c6-d12 / c3-d5 }`, etc.
That being said, most of the time it would make way more sense just to have multiple column grids, then nest a different grid inside a full width column of another grid if they're incompatible.
Actually I suppose you're describing a system where you can arbitrarily position fifths anywhere along another grid. Like a 1/5 col starting at the end of a 1/3 col... That would be more tricky.
@@simon_apphaus1863 One row: 1/5 3/5 1/5, the other row: 1/3 2/3, third row: 1/4 1/4 1/4 1/4
This isn't possible with 18 columns.
I understand grid, grid-template-columns, however, I barely understand this video.
Is there any tutorial that already teaches this trick from beggining? The way the video started seems it has already been taught. Please i need the link if there is 🙏
Hey Kevin, could you put your code somewhere like CodePen so we can see it and play with it?
👏
Damnit, the new thumbnail tricked me into clicking!
class="grid-cols-[[full-width-start]_minmax(1rem,1fr)_[content-start]_min(100%_-_2rem,1fr)_[content-end]_minmax(1rem,1fr)_[full-width-end]]"
I know you guys will all enjoy doing this 😊
👍
I thought you had to use line names/numbers to overlap , and could accomplish overlap with grid areas? 06:05
EDIT: right, 08:00 I must have misunderstood what he was saying a couple min ago bc now he explicitly says “what you can do with line names that you can’t w grid areas is create overlapping content”
18:21 I was just wondering how subgrid would work with this!
I'm not sleeping it just to much to learn 😢
Everytime someone starts talking grid my eyes glaze over. I really wish it would absorb but my brain goes into overload the deeper it gets.😂😢
React tutorial pls!
Vanilla JS from time to time, maybe some Astro content, but I won't be diving into React, sorry! Lot of other good channels covering it, and I'm not really a fan of it :D
@@KevinPowell Ok, I got it sir! But your content is awesome!
10:56 you dont have to touch what
bro forgot he is a youtube and made a news tv channel :3
There is no code resource for this one? :(
wow incredible, it seems CSS is getting bigger with more words and place when it used to be simpler
Great stuff but a terrible dev experience, especially ehen on one line . Gonna need to watch this a couple of times over 😅
It's awkward to look at that one-liner, but the dev experience when it comes to actually using it is *amazing*. Some of the more bespoke options, maybe not, but the exampel I showed with the breakout left and right just makes me so happy every time I use it, lol.
@@KevinPowell true that! I was speaking about the readability , and how it affects the comprehension. For sure this opens doors and Im going to use it for sure. The overflow example also promises me that thoere is a lot we can do. thank you for that
Love your videos but but I don't feel like you explained this one very well. How the hell is this working?
As I said at the end, this one was definitely more of a higher level overview than it was a step-by-step guide on getting it working. More about showing what's possible :) - I have a video where I look at named grid lines in more detail linked in the description
I stole this trick from Spotify 😊
It's difficult to take your content seriously when your video titles are constant hyperbole.
You definitely shouldn't take it seriously. Just find another CSS dude on youtube. There's loads of them.
@@ChrisShawUK Someone needs to call out the sores of things that are destroying CZcams.
@@atlantic_love like I said, you need to seek out a new source of CZcams CSS channel. One you can take seriously.
I'm unsubscribing because you blur the lines from your preview thumbnail.