I've recently found you and I'm so glad because I can understand html/css much better due to your excellent explanation. You are a real gem. 🙂🙏🏻 Thank YOU so much!
Fantastic tutorial. I've been working with HTML/CSS for over 10 years now (even the old floats/clear). The one thing I have avoided to this point is grid. This gives me confidence to dive in.
you taught me many things about CSS. I was not good at designing part a few months ago but now I can say confidently that I know CSS. thnk you, Kevin. Love from India.🤍
No one's talking about it, but I do like the darker ambience and colours of the background you have in your room! (or where you're doing the recording.) 😊👍 (great video! Always learning with your videos)
thank you so much sir. it's so good to see videos from you. and I love your love for css. We all are waiting for you to start uploading Javascript videos also.
Super Kevin... you're an awesome explainer...and I like how you concentrate on the essentials. I'm new to grid...and this was super helpful to get me started. Thanks!👍 Oh...and you don't dumb it down either...you actually give insight on what's really happening. My kind of learning!
Thank you for this video. This is awesome! I have been doing a deep dive into grid over the last couple months and this is very helpful! At work we've been using bootstrap since 2016, and I understand that pretty well, but it has actually put me behind on keeping up with modern css, including flexbox and grid. I am hoping after during our next redesign that we ditch bootstrap. It's such a "heavy" framework.
So you are telling me that I don't have to bang my head against the wall trying to figure out CSS positioning and display flex? 🤯🤯 Considering that every website nowadays uses some type of a grid, I am using this in every container I design moving forward.
Hey Kevin i m in love with ur css videos and tutorials.i have learned css and learning advanced by ur RU-vid and practising.where can i learn javascript and master it
Hi Kevin, I have been watching your videos for a while now and have learned so much especially when it comes to grid. I have a question about grid I am having trouble finding an answer to. Maybe you could help. If you have a grid container with 3 children that have grid area names to make a grid-area-template on the container. What happens if you introduce a new div to the grid container that doesn't have a place in the grid-area-template. For example an off screen navigation. should this live in the grid container or should it be placed outside container. I have tried it and it doesnt effect the grid being inside, but is that the best setup? Been looking for a definitive answer on this.
Hello Kevin Can you make an animation like youtube when you have internet avaiable that shows the button retry and when you click on it the animation just looks so amazing when longpress the animation goes slowly from where we clicked and when fastclick it goes fast and stops at 90% and i have researched it the animation name is paper ripple but those weren't i was expecting i think it can easly been done on android studio because i have seen this type of animation from android developers but can you make it with css and we enjoy your videos so much
@@KevinPowell another one the customized tool tip when hover on channel tip and it position it self automatically when there's not enough space to the top and bottom can you also do backend and frontend mix videos since your css knowledge is already so amazing. It's been three months since i have been coding and now i am stuck i don't know what to build what project can you give me tips
Hi Kevin! Thank you for all of your time and effort put into these videos - I'm a backend coder primarily but recently I've taken on a project that is really challenging me on the frontend. I have a layout that I would love your opinion on materialising. It's a CRUD system that has a topper and a sidebar (left side), and all other cards are rendered in the whitespace created by the top and side bars. I need the bars to remain position while the components in the whitespace change (using Reactjs). I tried sticking to flexbox only, but each of the components are built individually and then composed together to build the page. I ended up creating wrapper upon wrapper upon wrapper... you get the idea. I then tried grid (with components themselves using flex), it makes incredibly logical sense to me - however, I am having problems with different resolutions. Widths of the devices used on the frontend range from around 1300px to 4096px (no mobile). At this point I'm sitting with grid containers upwards of 60 columns and I'm getting nowhere.... Look FANTASTIC on the 4k res, but a driven-over grilled cheese below 2000px. I would GREATLY appreciate any advice you have on this 🙏🏼 Here's the concept: drive.google.com/file/d/17cmDBVCrFvtafVGUygOCQbIR6_6-IYUn/view?usp=sharing
Hey Kevin thank you for these great videos. I would love to see a video about css browser compatibility. How to write (and test) css that's supported by the majority of browsers. I've recently struggled a lot with the gap property not being supported on older Safari browsers.
I am really envy of your skills. I always wondered that if is it possible to make a CSS-only masonary? It was inpossible 10 years ago when there were no CSS grids. Back then the time that I was building websites to make extra money. Now I wonder if is it possible today's CSS properties? EDIT: I found your video!
pls make a video with elements placing with grid as centering etc. im using flex with justify-content, align-items, flex-direction, but im stuck with it in grid i would be really appreciated
So correct me if i'm wrong, but wouldn't it be better and easier if we replace using flex with using grid with all projects? Grid can do all the things that flex can do, except that it seems you have more control with grid and grid is more accurate.
Btw, an offtopic request. Firefox has temporarily disabled "Backdrop-filter" property in their browser on account of some bug. Is it possible to get a video (or maybe even a short) on how we can create a workaround for this? Afaik @supports doesn't work either because of some other bug in the browser & the only viable solution is to be some other workaround. One can enable backdrop by going in about:config but considering not many users will have it enabled by default, it'll break out site's design. Would you be willing to look-up on it?
Hi Kevin! I've been struggling with this for way so long now, and didn't find the solution. Is there a way to make a column defined in the grid "optional"? I would like to keep the grid layout all around my site, but there are some sections where I don't have a sidebar in it. Is there a way to define the grid as something like "if the sidebar is present, then put in here with this column fixed size, but if it isn't, simply expand the main cell in the grid to fill the container". I know this can be done quite easily with flexbox (with flex-grow:1 and, simply, not adding the sidebar to the DOM), but now I'm learning grid and I've been stuck trying to figure out how to do it. Any advise? Is it even possible? Or due to grid specification the layout needs to be as it is, consistently? Thanks a lot!
I've talked about it before in some videos, but the tl;dr is grid is better for more structured layouts, flex is better when you want the children to have more control. So, grid for more of a "layout", flex for things like navigations, tags, and some other things like that.
Can you explain why, often when doing columns with say “repeat(10, 1fr)” I do NOT get even columns? I have to change it to repeat(10, minmax(0,1fr))” to get even columns. I find that this happens quite often when doing grid layouts using areas. Thanks!
i never use @media queries. they are not reliable if you are designing components not pages and i dont like having different css for different screen sizes i just use flex and grid tricks to make reusable responsive layout components
for example lets say you have a form, and a button on wide screens you want button to not fill all of the space and you want it to fill all of the space when on mobile so you do something like this .fill-on-break { display: flex; flex-wrap: wrap; } .fill-on-break > * { flex-grow: 1; } .fill-on-break::after { content: ""; min-width: min(100%, var(--min-empty-space)); flex-grow: 1000000000000000; } and put the button in it you can also make this `justify-items: center`, and it would center the button on break inside of filling the whole space
Media queries aren't perfect, but they serve a purpose, and hacks like that (which work!) will just confuse someone who's just getting started, who this is intended for. I'm also really looking forward to container queries, so we won't need things like that in the future.
@@nomadshiba Not sure how you can say media quires are not reliable when your own code would be more likely to cause browser compatibility issues. Media quires are tried and tested but of course less is more.
I believe that's one of his defaults when making a full CSS file. I just don't see percentages used that much though unless as he pointed out you actively want it to be that size.
box-sizing won't really have a big impact if you're using grid, unless you're setting widths on the items inside the grid and allowing them to set the cell widths or heights (with a template-row or column set to something like min-content or max-content).
I literally just had to design a grid, and being more familiar with flex I tried to use it. Had a lot of problems with that. This solves my problem perfectly, with 2 lines of code. You're magical!
Grid looks so nice on these Basic content. But its so useless to use in real web template building. U Can use Grid when u want image Grid or something, but build web layout with Grid is useless. And it have white space Bug , Flex have this Bug too
I use grid for real layouts all the time, more often than flexbox. If you get complex and layout things on specific lines and columns, I agree that it's not very practical for scalable solutions, but you don't need to use it that way. And what's the white space bug? Both flex and grid don't have collapsing margins on their children, but that isn't a bug, it's an intended behavior.
@@KevinPowell white space at bottom, where is 1-3px space after last item in Grid or Flex. And u cant use background color, bcs it looks so Bad with that space. If i Remember correctly, it happens when i use img inside the box, idk right now. I will work with it again and i send u example of it
Fair enough... to get the same thing I would then have had to make a new selector that selects all the children, and declared either "flex: 1" or "width: 100%"
Love how all his 'GET STARTED' videos include: "OK, as you can see I've ALREADY LAID OUT STEPS THREE HUNDRED AND FORTY-SEVEN in this process so let's just continue with...". Never actually starts at the beginning of anything, ever. He also seems completely uninterested in defining basic characteristics of core element behavior. Too bad.
What steps did I skip? The only thing was having some HTML in place. I could have written that out, but I broke down the structure it needs to have, which is really all that's important here. The stuff in those divs could be anything at all.
