Probably the most underrated (and useful) CSS feature

Подписаться 913 тыс.

Просмотров 71 тыс.

50% 1

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 RU-vid 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!

Опубликовано:

1 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 100

@davidricebowled 5 месяцев назад

"I don't have to touch the children any more," - best out-of-context quote of the day. 😅

@JoakimMegert 5 месяцев назад

Immediately stopped the vid to check the comments for this! 😂

@RSTirendi 5 месяцев назад

That is the best comment on any KP video… EVER! And Kevin, once again, has managed to pump out more great content.

@brokeloser 5 месяцев назад

I’m glad he has understood the impact of his past behavior and is turning over a new leaf. NO MOAR TOUCHING

@hclyrics 5 месяцев назад

There's also "I can come on something" (1:34) and "we've made our long things even longer now." (5:01)

@seiuwatches 5 месяцев назад

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!

@CirTap 5 месяцев назад

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?

@MaxPicAxe 5 месяцев назад

@@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.

@LordValtrius 4 дня назад

I tried this approach on a new project and I have to admit, at first I was calling you all the names under the sun because grids only work on the children of the grid. Then I remebered subgrids but alas I wasn't able to implement the approach because the html needs multiple semantic layers like `main` and `article` etc but then I had an epiphany. What if, just what if, a subgrid can have a subgrid that inherits the subgrid's grid. I gave it a try and now it's working beautifully. Amazing stuff.

@asofantzis 5 месяцев назад

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

@claudiu7555 5 месяцев назад

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

@stevemarshall5249 5 месяцев назад

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.

@richardhulse9328 5 месяцев назад

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.

@carlos_capo 5 месяцев назад

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!

@ozanmuyes 5 месяцев назад

You really do know the pain points and well-suited solutions for them. Thanks Kevin, we're lucky to have you 🖖🏻

@kristianulvund4274 5 месяцев назад

Thank you for sharing, Kevin❤ I’ll definitely be playing around with this technique😁

@inteltone 5 месяцев назад

Great info! Thanks a lot! I'm sure I'll implement this in my next project.

@TJKlimoski 5 месяцев назад

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 😍.

@EtienneMaheu 5 месяцев назад

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.

@PhysicsITGuy 5 месяцев назад

This is incredible. Thanks for sharing!

@Matty100 5 месяцев назад

Love it Kevin! Looks super modern!!

@QwDragon 5 месяцев назад

Great features, love it! Thank you!

@warkentien2 5 месяцев назад

This is so powerful. Thanks for sharing!

@sarojchauhan7392 5 месяцев назад

Awesome explanation Kevin 👏

@IanZamojc 5 месяцев назад

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.

@CyberTechBits 5 месяцев назад

Been following for years brother! I have a new website to deploy and I'm going to use this for prod! Thanks my friend!

@djkay2803 5 месяцев назад

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!

@MaxPicAxe 5 месяцев назад

This is one of the coolest css features and only recently learned about it

@MaxWeir 5 месяцев назад

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.

@LeonVisnaw 5 месяцев назад

I am a huge fan of slower :)...Really appreciate your channel.

@shawndawookiee 5 месяцев назад

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?

@atharvamogade 5 месяцев назад

I am not just getting knowledge but enlightenment. Thank you lord Kevin! 🙇‍♂

@BauldyBoys 5 месяцев назад

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;}

@KevinPowell 5 месяцев назад

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.

@user-rl2db6wm3v 5 месяцев назад

Nice video :-) It would be nice if these grid lines could actually be animated or at least I haven't figured it out yet :-)

@arthur.v.babayan 5 месяцев назад

Finally I understood why your speech is so fluent and quick, you read that text :

@probioticant 5 месяцев назад

Love the t-shirt!

@surgeon23 5 месяцев назад

Rumor has it, some of us are still reading that one line of CSS.

@CZghost 5 месяцев назад

This is actually really useful for me, because this is exactly what I need for my websites.

@nomadshiba 5 месяцев назад

i also started to do this, after your video about those

@AndreT-zq6rp 5 месяцев назад

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 👍💪👍

@neodevils 5 месяцев назад

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._

@KevinPowell 5 месяцев назад

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?

@zorokutend 5 месяцев назад

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.

@zorokutend 5 месяцев назад

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

@neodevils 5 месяцев назад

@@zorokutendi was wondering like, if we use two same id names for different elements; they still work as classes right?

@neodevils 5 месяцев назад

I am using tags, cause finding name for my elements is 😢

@spatialoptic 5 месяцев назад

You're killing me, SMALLS! LOL! Love it!!!!!!!!

@robertsastra 4 месяца назад

Thanks!

@KevinPowell 4 месяца назад

Thank you so much!

@fer.barrios 5 месяцев назад

You should do a reaction video of a backend dev watching this video haha

@dbarjs 5 месяцев назад

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.

@ducvu7566 5 месяцев назад

this is gold

@elina6969 5 месяцев назад

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

@patricknelson 5 месяцев назад

5:50 Physical embodiment of 🤯

@user-vd3ph6zh8q 4 месяца назад

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; }

@legendreoli 5 месяцев назад

Hey Kevin, could you put your code somewhere like CodePen so we can see it and play with it?

@juliusuwuigbe7743 5 месяцев назад

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.

@KevinPowell 5 месяцев назад

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

@juliusuwuigbe7743 5 месяцев назад

@@KevinPowell Ok. Keep us 📫 posted

@magicfibre 5 месяцев назад

10:57 Full stop

@return_undefine 5 месяцев назад

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 🙏

@nielslytzdk 5 месяцев назад

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..

@kevingonzalez2120 5 месяцев назад

ima bout to replace a lot of hacky and shitty CSS at work tomorrow with this 🔥🔥

@koz 5 месяцев назад

named-grids are are are are great great :)

@koz 5 месяцев назад

I like to name 'grid-area's then layout grids using just their names with 'grid-template-areas'. repeating where necessary.

@rahul9704 5 месяцев назад

Damnit, the new thumbnail tricked me into clicking!

@lukedorny 5 месяцев назад

only a few minutes in and this is a lean mean solution. Wow.

@ellisj98 5 месяцев назад

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.

@fabsn182 5 месяцев назад

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

@simon_apphaus1863 5 месяцев назад

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.

@simon_apphaus1863 5 месяцев назад

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.

@fabsn182 5 месяцев назад

@@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.

@NBGdeki 5 месяцев назад

There is no code resource for this one? :(

@clevermissfox 5 месяцев назад

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”

@clevermissfox 5 месяцев назад

18:21 I was just wondering how subgrid would work with this!

@Blu3wonder 5 месяцев назад

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.😂😢

@houssembenothmen7250 5 месяцев назад

bro forgot he is a youtube and made a news tv channel :3

@user-bu6fn3bw8b 5 месяцев назад

👍

@nicholasgillespie7081 Месяц назад

👏

@user-re8lt2gy3g 5 месяцев назад

I'm not sleeping it just to much to learn 😢

@awman7182 5 месяцев назад

10:56 you dont have to touch what

@dorian0623 5 месяцев назад

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 😊

@Abubakr-triedCoding 5 месяцев назад

React tutorial pls!

@KevinPowell 5 месяцев назад

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

@Abubakr-triedCoding 5 месяцев назад

@@KevinPowell Ok, I got it sir! But your content is awesome!

@whatthefunction9140 5 месяцев назад

Love your videos but but I don't feel like you explained this one very well. How the hell is this working?

@KevinPowell 5 месяцев назад

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

@TheMetalMag 5 месяцев назад

wow incredible, it seems CSS is getting bigger with more words and place when it used to be simpler

@JosephCodette 5 месяцев назад

Great stuff but a terrible dev experience, especially ehen on one line . Gonna need to watch this a couple of times over 😅

@KevinPowell 5 месяцев назад

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.

@JosephCodette 5 месяцев назад

@@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