"I don't have to touch the children any more," - best out-of-context quote of the day. 😅
@JoakimMegert8 ай бұрын
Immediately stopped the vid to check the comments for this! 😂
@RSTirendi8 ай бұрын
That is the best comment on any KP video… EVER! And Kevin, once again, has managed to pump out more great content.
@brokeloser8 ай бұрын
I’m glad he has understood the impact of his past behavior and is turning over a new leaf. NO MOAR TOUCHING
@hclyrics8 ай бұрын
There's also "I can come on something" (1:34) and "we've made our long things even longer now." (5:01)
@seiuwatches8 ай бұрын
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!
@CirTap8 ай бұрын
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?
@MaxPicAxe8 ай бұрын
@@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.
@claudiu75558 ай бұрын
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
@LordValtrius3 ай бұрын
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.
@asofantzis8 ай бұрын
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
@ozanmuyes8 ай бұрын
You really do know the pain points and well-suited solutions for them. Thanks Kevin, we're lucky to have you 🖖🏻
@richardhulse93288 ай бұрын
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.
@stevemarshall52498 ай бұрын
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.
@TJKlimoski8 ай бұрын
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 😍.
@KawazoeMasahiro8 ай бұрын
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.
@djkay28038 ай бұрын
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!
@kristianulvund42748 ай бұрын
Thank you for sharing, Kevin❤ I’ll definitely be playing around with this technique😁
@soviut3038 ай бұрын
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.
@MaxPicAxe8 ай бұрын
This is one of the coolest css features and only recently learned about it
@BauldyBoys8 ай бұрын
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;}
@KevinPowell8 ай бұрын
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.
@arthur.v.babayan8 ай бұрын
Finally I understood why your speech is so fluent and quick, you read that text :
@Matty1008 ай бұрын
Love it Kevin! Looks super modern!!
@carlos_capo8 ай бұрын
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!
@warkentien28 ай бұрын
This is so powerful. Thanks for sharing!
@atharvamogade8 ай бұрын
I am not just getting knowledge but enlightenment. Thank you lord Kevin! 🙇♂
@CZghost8 ай бұрын
This is actually really useful for me, because this is exactly what I need for my websites.
@inteltone8 ай бұрын
Great info! Thanks a lot! I'm sure I'll implement this in my next project.
@surgeon238 ай бұрын
Rumor has it, some of us are still reading that one line of CSS.
@PhysicsITGuy8 ай бұрын
This is incredible. Thanks for sharing!
@CyberTechBits8 ай бұрын
Been following for years brother! I have a new website to deploy and I'm going to use this for prod! Thanks my friend!
@LeonVisnaw8 ай бұрын
I am a huge fan of slower :)...Really appreciate your channel.
@sarojchauhan73928 ай бұрын
Awesome explanation Kevin 👏
@QwDragon8 ай бұрын
Great features, love it! Thank you!
@AndreT-zq6rp8 ай бұрын
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 👍💪👍
@awman71828 ай бұрын
10:56 you dont have to touch what
@odormano8 ай бұрын
Nice video :-) It would be nice if these grid lines could actually be animated or at least I haven't figured it out yet :-)
@MaxWeir8 ай бұрын
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.
@patricknelson8 ай бұрын
5:50 Physical embodiment of 🤯
@neodevils8 ай бұрын
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._
@KevinPowell8 ай бұрын
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?
@zorokutend8 ай бұрын
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.
@zorokutend8 ай бұрын
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
@neodevils8 ай бұрын
@@zorokutendi was wondering like, if we use two same id names for different elements; they still work as classes right?
@neodevils8 ай бұрын
I am using tags, cause finding name for my elements is 😢
@magicfibre8 ай бұрын
10:57 Full stop
@fer.barrios8 ай бұрын
You should do a reaction video of a backend dev watching this video haha
@probioticant8 ай бұрын
Love the t-shirt!
@shawndawookiee8 ай бұрын
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?
@fabsn1828 ай бұрын
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_apphaus18638 ай бұрын
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_apphaus18638 ай бұрын
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.
@fabsn1828 ай бұрын
@@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.
@spatialoptic8 ай бұрын
You're killing me, SMALLS! LOL! Love it!!!!!!!!
@nomadshiba8 ай бұрын
i also started to do this, after your video about those
@ducvu75668 ай бұрын
this is gold
@dbarjs8 ай бұрын
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.
@user-vd3ph6zh8q7 ай бұрын
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; }
@ellisj988 ай бұрын
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.
@nielslytzdk8 ай бұрын
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..
@kevingonzalez21208 ай бұрын
ima bout to replace a lot of hacky and shitty CSS at work tomorrow with this 🔥🔥
@dorian06238 ай бұрын
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 😊
@robertsastra7 ай бұрын
Thanks!
@KevinPowell6 ай бұрын
Thank you so much!
@return_undefine8 ай бұрын
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 🙏
@clevermissfox8 ай бұрын
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”
@clevermissfox8 ай бұрын
18:21 I was just wondering how subgrid would work with this!
@lukedorny8 ай бұрын
only a few minutes in and this is a lean mean solution. Wow.
@NBGdeki8 ай бұрын
There is no code resource for this one? :(
@Blu3wonder8 ай бұрын
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.😂😢
@koz8 ай бұрын
named-grids are are are are great great :)
@koz8 ай бұрын
I like to name 'grid-area's then layout grids using just their names with 'grid-template-areas'. repeating where necessary.
@rahul97048 ай бұрын
Damnit, the new thumbnail tricked me into clicking!
@legendreoli8 ай бұрын
Hey Kevin, could you put your code somewhere like CodePen so we can see it and play with it?
@juliusuwuigbe77438 ай бұрын
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.
@KevinPowell8 ай бұрын
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
@juliusuwuigbe77438 ай бұрын
@@KevinPowell Ok. Keep us 📫 posted
@Abubakr-triedCoding8 ай бұрын
React tutorial pls!
@KevinPowell8 ай бұрын
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-triedCoding8 ай бұрын
@@KevinPowell Ok, I got it sir! But your content is awesome!
@houssembenothmen72508 ай бұрын
bro forgot he is a youtube and made a news tv channel :3
@TheMetalMag8 ай бұрын
wow incredible, it seems CSS is getting bigger with more words and place when it used to be simpler
@user-re8lt2gy3g8 ай бұрын
I'm not sleeping it just to much to learn 😢
@whatthefunction91408 ай бұрын
Love your videos but but I don't feel like you explained this one very well. How the hell is this working?
@KevinPowell8 ай бұрын
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
@nicholasgillespie70814 ай бұрын
👏
@JosephCodette8 ай бұрын
Great stuff but a terrible dev experience, especially ehen on one line . Gonna need to watch this a couple of times over 😅
@KevinPowell8 ай бұрын
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.
@JosephCodette8 ай бұрын
@@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
@atlantic_love8 ай бұрын
It's difficult to take your content seriously when your video titles are constant hyperbole.
@ChrisShawUK8 ай бұрын
You definitely shouldn't take it seriously. Just find another CSS dude on youtube. There's loads of them.
@atlantic_love8 ай бұрын
@@ChrisShawUK Someone needs to call out the sores of things that are destroying KZfaq.
@ChrisShawUK8 ай бұрын
@@atlantic_love like I said, you need to seek out a new source of KZfaq CSS channel. One you can take seriously.
@다루루8 ай бұрын
👍
@bxlbjorn8 ай бұрын
I'm unsubscribing because you blur the lines from your preview thumbnail.
@Stoney_Eagle8 ай бұрын
I stole this trick from Spotify 😊
@elina69698 ай бұрын
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