The Joy of CSS Grid - Build 3 Beautifully Simple Responsive Layouts
ฝัง
- เผยแพร่เมื่อ 22 ก.ค. 2024
- Build 3 responsive CSS grid examples to master the basics of this powerful layout system. github.com/fireship-io/224-an...
Full Tutorial: fireship.io/lessons/three-res...
1. Responsive 12-column bootstrap replacement.
2. Mosaic photo gallery.
3. Staggered animation grid.
Featuring special guest Bob Ross.
#css #grid #tutorial
Install the quiz app 🤓
iOS itunes.apple.com/us/app/fires...
Android play.google.com/store/apps/de...
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
My VS Code Theme
- Atom One Dark
- vscode-icons
- Fira Code Font - วิทยาศาสตร์และเทคโนโลยี
![เปิดบ้านสุดหรู "เเจ็ค the ghost" ลั่นถ้าป๋องกพลลำบากผมเลี้ยงเอง!! l [Nickynachat]](http://i.ytimg.com/vi/1xbW4vULqGc/mqdefault.jpg)
Your content is unmatched in quality, timeliness and usefulness.
Couldn't agree more
Still the GOAT :)
Man your content is so on point and so professionally made. Blows my mind how you can keep up content like this. Thank you so much for your support of developers. Like Steve Balmer always said, "DEVELOPERS, DEVELOPERS, DEVELOPERS!!!"
James Best I have to agree
Definitely - my understanding of grid was growing, but five minutes of this video and it's multiplied ten fold.
you took the words out of my mouth. Hip hip for Fireship
Indeed, amazing lesson!
Like Steve Balmer always said: "I'm hungry. Bring me another baby"
Great vid! Really like the animated entry. One technique I have used instead of lots of :nth-child(1) rules is to put variables on the element in the HTML. So for the animated grid example, the divs look like:
a
b
c
d
and the CSS can be done in one rule:
.card {
animation: cardEntrance 700ms ease-out;
animation-fill-mode: backwards;
grid-area: var(--g);
animation-delay: calc(var(--i) * var(--stagger-delay));
}
- this keeps the repetition in the HTML where it is going to be anyway.
Thank you
OOooo, I like this. Coming from Python/Java any kind of repetition has that bad code smell. The next thing I want to work out is to make the grid general enough to handle a variable number of children.
I need to start using this over Bootstrap. Awesome video as always!
You won't be disappointed, it only took an hour or two to replace all my grids on Fireship.io
@@Fireship wth man, your fireship.io website is just so awesome dang it
It's amazing how in a short period of time you manage to cover alot about the topic. Simple, highly educational and easy to watch, simply awesome!
i absolutely love the mix of on-point content, clear structure and the occasional gifs and memes. your channel is one of instant recommendations for any web dev. thank you for putting so much effort into these videos.
2:57 let's start by giving our children a little bit of spacing. 🤣
Jeff, you must/will be a great father. 😍
I was just watching this video now and saw your comment, Jeff had a child recently! Congratulations to him:3
@@zafirhasananogh2421 wow, thanks for reminding of this comment I made, now it's come true, I say congratulations again, Jeff, as well. 🥳😄
That idea for passing the grid-area as the shape it occupies in the final layout is fantastic, I love it! Great video, thank you!
It's been 3 years and I keep coming back to videos like this to re-learn. Lots of love, my Captain!
Man I was woefully in need of good grid tutorials. Yours is awesome! 👏🏼
Please keep more grid coming!
I started playing with grid for the first time last week. I LOVE IT.
SO PROUD of this channel ! Thank you so much Jeff for your excellent work
I can only agree with what everyone else is saying, your content is in a class of its own. You simplify complexity and have a talent for understanding concepts in such depth that you can convey the most useful bits clearly and logically. No surprise that your channel is doing so well. Thank you and respect!
This the the most well structured video I have seen on grid and it helped a ton. Thank you. Impressive how well you had such a liner path. Most vids I see kind of just throw a zillion terms at you and it’s kind of like information through a fire hose, but the flow of your video and the execution was perfect.
I have used grid before and watched many videos on it but this is by far the best video I came across.
I watch this video during my workout, and I have to hurry finishing it up so that I can write the code out. Awsome video, man
Good job man! Teaches GRID very well. Great presentation with simple-to-understand demos! SMASHING the LIKE button!!!!
The card entry animation is beautiful 😍
Unbelievable the quantity of amazing content you crank out. Thank you!
Respect, die best tutorial i watched for CSS-Grid right now!
This video is great! I've been trying to level up my CSS. There is way too much CSS in my projects. This is a perfect way to cut down my CSS volume.
Goddammit, I have subscribed already and I somehow managed to miss this one. I'm a late-starter Millenial, but you make me feel like a little kid that sees new and exciting things with glee. The more we can do ourselves without relying on systems like bootstrap, the better. Not that bootstrap should be hated on either, but it's far too large for many projects. Thanks for your hard work!
You explain this very well, and thank you so much for not having distracting background music!
*A backend dev here* just to say that İ understood everything amazing
Front end is so hard. Back end has it easy.
Ï don't understand your letter Ī
Found this Channel around one week ago and man i love every single Minute of your content. :)
I saw this video a couple of months back, today a bug was raised at my current job about some cards not being shown correctly on smaller screens and I just had to come back to this video to remember how to do it, thanks man!
This is great😬I was struggling with css fitting for years, I just learned how grid can wrap all the problems up...
Awesome video as always! Well made and easy to follow. Thank you.
Sensational content. I love the way you explain and demonstrate how things works. Big thank you!
been practicing grid for a year and didn't know about auto-fit / auto-fill mode
thanks a lot!
lol yeah me too
lool
TH-cam really needs to add a Superlike button, especially for this video! I'd hit it in a heartbeat
That is exactly what I was looking for! ily man
This is the best grid lesson ever!
I've been watching a lot of TH-cam videos to understand grid but never understood it but your videos explanations are so simple and easy to understand. Thanks bro
I love the clips you add in your videos, they crack me up lol.
The basic grid was exactly what I needed for my website. Thanks!
Super helpful, Each part deserve a detailed video itself, thanks
THANK YOU i was looking for ages for such an easy to follow Explanation
thank you very much for your video, it feels so good to follow you step by step, keep up the great work man
I started learning Grid today and you uploaded it!
Thnaks a lot :) You made me fall in love with CSS
I find it insane that you don't have like a billion subs - your videos are extremely helpful and perfect length - freaking great man!!!
Really awesome content! Love the fact that it’s concise and to the point.
Thank you for sharing this, this knowledge is literally gold
this is what im looking for
The best content in time. Loved it
simply perfect !, thanks dude awesome video tutorial as always !
Awesome video and examples! Hope you will add a lot more of these about CSS Grid
Thank you for this amazing demo!
Thank u very much.
I knew how to work with basic grid properties but u made it very easy and clear for me.
Just wonderful!! Love it!
I watch a few videos and read a few articles on CSS Grid. Your explanation helps me understand repeat(#, size)
Such perfect video on grid and mainly lot of valuable information put together in 12min video..that is just great
🤯. I just learned css-grid. Thanks you!
Wow, that's really impressive!
Amazing! Thank you.
I never writte coments on videos but yours is just sublime, thanks alot.
I love your videos, I was looking just because they are entertainment, but after a while you present me this complex world in a way so enjoyable and simple that i love it and i start to build apps. THX YOU (LLL)
Thank you for this great video on CSS Grid.
Wow. Wish other tutorials were this good
As a newbie web developer , Learning grid for me is super awesome , thanks to you mate cheers .
grids are a lifesaver
Great video. As an update to it, we now have @container in CSS 3.
THE BEST GRID LAYOUT VIDEO THERE IS
Amazing content as always, thank you.
this is soooo good. thanks!!! hope to use this on my database website soon! :)
Incredible, man, thank you.
These videos r the best for recap.
solid presentation! Thank you!
Great video! Your channel deserves more than this.
I have never heard about this until now, interesting feature.
dude your course is golden
Always the best! 🌟
Best tutorial so far. Thank you so much. Make more and more videos, please.
Thanks a lot man, you nailed the CSS Grid :)
Pure gold. Short and precise, 0 bullshit. Reminds me of legendary 'kudvenkat' channel for .NET.
Thank you so much for this video. I had difficulties to learn grid in the last days but now you solved all my problems :p
This is so inspiring. Thank you.
Absolutely loved it
Very well done! Tnx.
I use basic grid, but I had no idea you could do these animations with only css. That's a killer. I might never use this in a production app, but it sure is fun learning how. Thanks.
hear hear!!!
Really useful video thanks!
Your videos are godlike in both presentation, flow and content. 11/10
Two years later still incredible
Detailed and succinct
Very informative 10/10
cant wait to design some dashboards with grids
Thank you for the excellent video.......volumes of info ....in minutes......
The highest quality content on web-dev on the web. Thanks 🙏
I'm working on website for 8 hours now, and seeing this video is blessing
I think this maybe the best css Grid video I have yet seen
how could one make an explanation video in such a short duration, yet the explanation itself is so on-point
Wow that was two years ago?!?!?!?!
Great video. CSS is so much
Amazingly good explanation. Thanks :)
How can you keep uploading so many videos so fast and in such great quality.
Have you premade them?
GJ✌️
This is literally an underrated channel!
This is gold
Thank you man a lottttt❤
Amazing very helpful content ad always 👏 thanks a lot ! 🙏
Thanks a lot for this, just great.. Thanks!
Thank you, thank you very much.