CSS Grid in 100 Seconds

[@Fireship]

Grid is not easy to summarize in 100 seconds, so stay tuned for a cool CSS project next week! UPDATE, full grid tutorial here 👉 kzbin.info/www/bejne/bWGYiXZ7p9qNfNU

[@SaharThe49]

Good to hear, thanks for the hard work and keep on producing more 100 seconds videos!🤪

[@yt-sh]

@@sanusihassan7125 you should make a demo of it to explain more easily than read the docs, but I will read them anyway

[@sanusihassan7125]

@@yt-sh Okay

[@MyALPHAguy]

you guys learned that from designcourse didn't you

[@husler7424]

However you explain a lot with ammazz examples.

[@yukihyo8394]

love how css grid is just a modern way of how they used to build websites with tables xD impressive explenation in 100 seconds tho! :D

[@Fireship]

That is a fair point, it is very similar to table layout.

[@Zuzki507]

nowdays you need to know excel to build websites

[@quazar-omega]

Tables but cooler

[@yzraeu]

@@Zuzki507 welcome to 2020

[@KennethJohnsen]

The idea is the same but semantic value is 100% different..

[@gradientO]

Try *this* in 100s

[@Fireship]

this is already in the works

[@artifexmusic]

Confusion 100

[@WTFAnyNameWorks]

What is.. This ??

[@privatelearning6825]

Not sure what you mean by this comment If you are talking about THIS in this comment then I must say THIS is a nice topic for this KZbinr to cover :)

[@sluigi]

to be honest, this is confusing.

[@anon89461]

SASS in 100 seconds, please!

[@zmedemz8172]

bump!

[@bijay7]

loved the example of comparing css grid with excel sheet... made it so simple to visualize

[@kasta867]

I'm amazed by these 100 Seconds series, amazing bite sized introductions without skipping too much over topics!

[@mgr1282]

love these in 100 seconds

[@aussieraver7182]

Seriously, CSS Grid and CSS Flexbox has solved all my requirements when it comes to layout and positioning for web applications. Whatever scaffold I am given, I can now finally recreate it in HTML/CSS with ease! FULL STACK OMW!!

[@Ankushdas2001]

Now play the video at 2x and make this in 50 seconds

[@ionutPavlencu]

epic :) , can you do a video about selectors, complex selectors and specificity ?

[@premnathd]

yes. many don't cover this

[@jazzmaster89]

Here's a great video on the topic. kzbin.info/www/bejne/eXncgXqJpa6bidU

[@canvaapplessons1224]

Which software do you use for videos? And how do you get the time to edit 😥

[@oskarzanota7116]

I just love how these videos really manage to explain a quite complex problem, but in 100 seconds. This is really useful as I often don't have the time or even just don't want to watch a long 10-20 minutes video about the subject.

[@nogoodgod4915]

Yes but this is just a really basic overview of the subject at hand. If you really want to learn and use CSS GRID you have to watch a 20+ minute video tutorial and do a bunch of projects with it to fully understand it.

[@TheNewton]

1:08 That is firefox browsers grid inspector, currently chrome devtools only has highlighting. Great thing about template areas is you don't have to be text so we can start to get abstract with the area names , emojis, box characters,numbers*. _forgive the youtube formatting system_ ┌─┬┐ ╔═╦╗ ╓─╥╖ ╒═╤╕ ├─┼┤ ╠═╬╣ ╟─╫╢ ╞═╪╡ └─┴┘ ╚═╩╝ ╙─╨╜ ╘═╧╛ grid-template-areas: "╒═══╤╕ ╒═══╤╕ ╒═══╤╕ ╒═══╤╕" "├───┴┊├───┴┊ ├───┴┊ ├───┴┫" "└────┘ └────┘ └────┘ └────┘"; .box1 { grid-area: ╒═══╤╕; } .box2 { grid-area: ├───┴┊; } .box3 { grid-area: ├───┴┫; } .box4 { grid-area: └────┘; } *numbers can't start css class names though.

[@Fireship]

Wow, this is amazing. I might have to feature this comment in the next video 👍

[@4MXW]

came here specifically for this comment hahah

[@crg_studios_2022]

who tf uses a right sidebar

[@AmxCsifier]

You should do a series on the best lesser known web features that you can use today.. I discover a really cool feature from time to time and I always wonder how much am I missing lol

[@Fireship]

I like that! I actually have a list of lesser known web/pwa features going now.

[@AmxCsifier]

@@Fireship The last one I discovered is that scrollIntoView supports smooth scrolling on most modern browsers! I found it smoother than jquery animate scrollTop

[@4MXW]

You're my hero. Not only because I need the content but because I want to (some day) have your standards in the way you teach and explain a concept.

[@beinyourguard]

Grid is powerful. So powerful that is actually kind of hard to understand it.

[@mohamedelomari6480]

Can you introduce yourself in 100s?

[@punsmith]

Don't be fooled by other channels... Fireship as a channel has become easily one of the most unbiased, on-the-point and versatile channels when it comes to web technologies. I wish I had this kind of information curated at regular intervals for me ten years ago.

[@bradywilliams1085]

thanks so much, this helped loads!

[@stevegraham3726]

@Fireship you did a video about a flexbox navigation menu, could CSS-Grid used to do the same thing? Is one method preferred over the other, or is CSS Grid just the newest (and best?) kid on the block?

[@ivantarnyagin]

00:03 that last line was like: *OUUUAAAUAAUAUAU*

[@will_abule]

What about a Grid vs Flex video

[@Fireship]

The main diff is that Flex handles a single col/row, while grid handles both. They actually work well together. I might try to show that in the next project video.

[@will_abule]

@@Fireshiplooking forward to it!

[@Krishnan172]

You are making video bombs with these 100 seconds video.... I am loving it!!

[@MMABeijing]

thanks fireship! may i ask what you use to edit ur videos?

[@nitkarshchourasia2406]

🎯 Key Takeaways for quick navigation: 00:00 🎨 *CSS Grid Overview* - Overview of CSS Grid layout system, - Explanation of grid tracks, grid areas, and grid container concept, - Introduction to setting up a basic grid layout in HTML. 00:27 📊 *Building a Grid Layout* - Demonstrating the process of creating a grid layout in HTML, - Visualization of grid lines, tracks, and areas in Firefox, - Explanation of setting grid template areas and assigning grid areas to children elements. 00:55 📏 *Adjusting Row and Column Sizes* - Modifying the size of rows and columns in the grid layout, - Explanation of changing column widths and heights using pixel values or fractional units, - Introducing properties like grid template rows, grid template areas, and grid gap for adjusting spacing in the layout. Made with HARPA AI

[@marcosmariante8706]

100 seconds! love the "cut the crap" approach, subscribed!

[@TheNewton]

🕹 Game - there is a gamified lesson at cssgridgarden that can be done on a lunch break 🏊‍♀️Deepdive - If you really need to know CSS Grid then see the website gridbyexample by Rachel Andrew ( or pretty much any of her work she helped write the spec) And read her article on supporting browsers without grid on smashingmag, and her cssgrid-ama on github 🛠 Tools - there's cssgrid-generator on netlify by sarah_edo 🎓Course - one thats free( wants your email...?) but I haven't tried it and it's a competing channel so don't want to link it

[@dailymeow3283]

I like your videos, short and straight to the point,, also the memes you're always putting and your graphics are kinda branding 👾💗

[@kaziboy264]

Fireship is the gateway drug to web development

[@KeithSmith42]

I'm about to trigger myself and several other people. Ahem. "We need to use Bootstrap 3 because some of our clients may be on browsers that don't support flexbox or grid." OOF!

[@giffiyt]

I think "make" (gnu make) in 100 seconds would be a good one! And... maybe after that cmake :)

[@youngkey3051]

On behalf of the community with ADHD I thank you for these quick videos lol.

[@itsawildtashi1614]

Thank you, Love your videos! keep makin em'

[@bahokilabadekia5712]

The overjoyed guatemalan conclusively pump because zone contextually breathe given a ruthless steel. tenuous, ragged queen

[@llihak]

thanks for the short and to the point video. well done. no rambling or jibber jabber, however ... I wish we could cure the internet of background "music"? didn't add anything, it was annoying and distracting, like far too many informational videos.

[@The__Gent]

Wish they would allow more than five unique grid-template-areas.

[@kerimtim]

Thank you really made things clear

[@dev_jana]

People of Earth, we have located the best tutorial on the Internet

[@Mattiac1980]

Skip the unnecessary music!

[@alihaydargubatov2790]

Is this to replace bootstrap grids? (Sorry backend dev here)

[@essaquadry]

You didn't even scratch the surface with grid

[@mitfreude]

I struggle with css grid earlier on codecamp hahaaha then I saw this but I already figured out

[@mountainslopes]

Finally, Chrome has added grid visualization!

[@segafrompk]

Great introductory video! I'm about to start work on some image gallery and wanted to test grid with it. This video helps a lot, tnx! :)

[@romeorel1679]

Grid seems to be easier to understand than flexbox although I use flexbox more often.

[@kreatur_]

Hey these vids are really well made you deserve more subs

[@MMABeijing]

so u subscribed already right?

[@kreatur_]

@@MMABeijing yea ofc

[@Kauzeyy]

Watched it in 2x and I learned it in 50 seconds

[@johnaweiss]

0:59 Why not use the same names? eg `header { grid-area: header; }` etc

[@SayJee]

Very impressive but can you explain Angular .for 100 seconds?

[@Georgedev_]

The video is short and very helpful.

[@sudhakars7282]

Your videos always exceeds my expectations. Thanks for sharing. You rock!!

[@howlingatthesound3125]

HA! That's my idea of a great tutorial!

[@ajayt2613]

Holy shit this video saved me 5 hrs of css boring lesson in just 1:50sec

[@riad2358]

like how awesome is this channel, seriously.....

[@chickeninabox]

How did you know, I was using Firefox.

[@kirayamato6128]

The only issue on modern css is it is not compatible on other browsers.

[@RounderSkillZ]

Love your videos so much.

[@codewitha7med]

more of this thanks a lot.

[@samuelkahunga5987]

love the high quality videos

[@rushikeshmore21]

Make full video on grid system

[@silvanb]

So what's the difference between this and a table?

[@jasontube22]

css grid? 1 minute? terry jones? like.

[@erdalguler1516]

Tamam abi teşekkür relsle

[@Erraticfox]

Amazing css grid always confused me but I think Flexbox is better than a grid template

[@ratulsaha9487]

NOICE. But I use Nextjs so having a main div is hard. I think I can try this on the element which is on my Layout class and put my Footer and Navbar inside the main.

[@yousafraza7747]

still waiting for full grid project

[@74Bagas]

As backend noob, i thought i don't need css. Now, i am in css rabbithole. And i regret... Didn't take it sooner

[@74Bagas]

Just to understand a little bit grid and flexbox, at least i feel smarter. And i believe it is good for brain exercise. Even for me who cannot pick the "right" color 😂

[@riveto_ir]

this was actually more educational for me than most of 20 or 30 minutes tutorials, is should saw BRAvo! 🤠😇

[@Xinthose]

Just use bootstrap.

[@jarret.roloff]

Thank you for this video. I just started out my developer journey, and grid has been difficult for me to grasp. This video is 🔥

[@MHF-go9sd]

It's amazing for gettin a general idea fast

[@thekickbot7309]

What music do you use for these videos?

[@ortatherox]

Nice overview

[@soultouchingsongs]

Excellent 👍👏

[@hardcoretltl]

pls 100sec nav bar explained

[@Omerko]

Well now i cannot wait for full CSS GRID Project.. Good Job!

[@pritishk123]

would like to see the grid full project. 100sec video was interesting.

[@aneesh.augustine]

Why this not working in chrome

[@ApurvKhare]

Your videos are good for a quick refresh of topics

[@patrickbateman7665]

Keep Playback Speed 2x to watch in 50 Seconds :p

[@nicholascummings9084]

WOW THIS WAS AMAZING THANK YOU

[@brettgregory3622]

More!!!!!

[@sanjibpun1887]

Love it... Thank you!

[@kameshharkhani4177]

Where Do You Get Your Music From

[@onurokumus]

4th

[@Fireship]

🏅Participation medal!

[@ThiagoVieira91]

You fulfilled you promise! You would be a terrible politician. Good for us! 👏

[@ashishtiwari3094]

Small and simple can you make a video for developing chrome extension?

[@niksperience]

Check css grid garden... best game where you learn css grid :)

[@selmaezzahid5480]

thank you so much💗💗💗

[@TheNewton]

the spreadsheet analogy is useful and since ALOT of people understand "merge cells" in that context explaining template areas should be a bit easier ,ty

[@ratulsaha9487]

Nuxtjs in 100 seconds

[@luis96xd]

This was an excellent video! Like all of them! 😄

[@PullanElijah-q5q]

O'Connell Mission

[@asimwilliams2116]

dude, fantastic content!

[@2u841r]

1:30 centered? hired

[@krau5_]

I was writing this comment during 3 hours, I think this tutorial is too fast for me...

[@randerins]

Mind blow! I'll be coming back to this video quite often.

[@ethaneveraldo]

Or just use

[@l.serpes3960]

Very loud music.