Learn CSS Subgrid in 14 minutes

🚨🚨🚨 COURSES - slayingthedragon.io 🚨🚨🚨
Join the discord - / discord
In September of 2023, Subgrid, a new CSS feature gained official support across all of the major browsers, allowing grid-items with their own grid, to inherit the rows and columns from the parent grid.

[@Abid-if5fh]

The comeback of a legend ..

[@TheThirdWorldCitizen]

Thanks. I didn’t appreciate subgrid until I had to work with named grids that had sticky headers

[@yosefff19]

I was rewatching all your previous posts and got so excited when I saw your new upload!

[@pazzuto]

Just found your channel and I really like your videos and the way you explained. As you talk about grid/subgrid, it'd be great to see a video of one or more popular templates out there (header, aside, main, footer, etc.). I'd love to see your approach. Thank you for the awesome videos.

[@elasticoGomez]

This is exactly what I’ve been looking for! Great content sir

[@jykata7134]

Thank you, for the helpful information! Keep making these great videos!

[@alyssapuype732]

I just watched your other videos for the 10th time. Amazing how you just uploaded one again! Waiting for the javascript course!

[@extremeboysmart]

Thank you! Your explanation are great!🎉

[@ThelndraS]

🎉Wow, I finally saw your new work after such a long time. Very good tutorial~❤

[@BrentTech]

Superb explanation! Thanks. The only thing I'd suggest is for more explanation on what things like the 1/4 and 1fr and such mean.

[@semperprimum26]

What an amazing tutorial. Thank you!

[@N1rOx]

great to have you bacK!

[@danrowllet]

amazing tutorial as always thank you!!

[@longyuanchuan]

Wonderful... This tutorial has five stars to me, it's concise, well explained, illustrative, and leaves nothing unchecked... Applause

[@ashutosh_tiwari]

Wonderful explanation buddy!! Keep up the good work.❤️

[@AbubakarsadiqIdris-mz5fq]

Thanks bro I always enjoyed ur tutorials

[@issa_the_ghost1257]

First off, congrats on 100k 🥳 Secondly, I didn't even know that this feature existed!! I usually just make nested grids or use Bootstrap. So thanks for the info !!

[@Caprice_08]

I needed that so much🎉🎉

[@edwassermann8368]

very nice work. thank you!

[@chrismachabee3128]

Truly a greeat lesson. Fantastic. Very uunderstandable aand vitally important thank you.

[@kaiso69]

Thank you man please upload more video about CSS Like building actual project from start to end

[@user-eo1vz9lt8g]

I bought your CSS course and it was a good investment, learning to use a page builder and Wordpress but knowing what the page builder is built upon is extremely helpful, of course it's not just CSS but since the builder lays down the HTML and Javascript and PHP, you can go a lot further if you can use custom CSS, looking forward to your vanilla Javascript course...

[@yacobee]

Very useful. Thank you.

[@senseislade]

finally, you've kept us waiting Ramzi

[@zack288]

He’s coming back on 100k. Congrats

[@andinuruljihad2912]

whoa this feature is incredible... great explanation, too.

[@ichiroutakashima4503]

This channel definitely slayed!

[@brentguiao4861]

Great explanation thanks❤

[@Sammorris207]

thanks for the clear explanation

[@Filaxsan]

Very useful!! 💪

[@mansulol5458]

the king is back 😭🙏🏾🙏🏾

[@imtseku]

Nice to see you again ✌

[@abdurrobr34l]

After a long time got ur video... 👍👍

[@deltaranzyd1587]

wow, the legend is back

[@ZockaRocka]

This was perfect 👌

[@JeffParker45]

Very Good! 👏👏👏

[@genshingamer8361]

What a great day when your video comes Thnx bro also expceting more new videos and your new courses also stay heathly.:)

[@codewithzero]

thats great. thanks dear

[@ShahriarCode]

ayooooo the king is back ⭐⭐

[@FumezCreates]

The master has returned 😤

[@godofwar8262]

Dragon is back 🔥

[@sadeemdzakaria3005]

You are one of the best CSS teacher on yt

[@mohsinahmedohi]

Worth subscribing you.

[@ShahriarCode]

man it was really helpful for me becuase i always faced prblems here

[@Dylan_thebrand_slayer_Mulveiny]

We've come so far from the good old days of 'float: left' and clearfix hacks. The old way of doing layouts like this involved a lot of nesting with flex, but it was clunky as hell. This new approach is really awesome. However, as of today Caniuse puts browser support for this feature at 88%, which is quite low for it to be used in production.

[@AyaanMahib]

Love your videos ❤❤❤❤

[@AyaanMahib]

I am only 12

[@mirjalol49]

U are back

[@harshalmali856]

awesome video gained something new

[@jackright9530]

Great video

[@albedesigns]

Great Video!

[@harunyussuf3593]

You replied 1 min after video uploaded. Watch it first

[@imredoyyy]

Welcome back ❤

[@hriso83]

The best tutorials for learning css

[@Igor-vk8fl]

SO SIMPLE!!! OMG

[@kirbyenriquez5417]

wow .. thank you :))))

[@timothyshiu2263]

wonderful! Does subgrid work with any number of nested-grid-that-use-parent-grid, for example, `div.grid > div.subgrid1 > div.subgrid2`? does subgrid also work with `grid-template-columns: repeat(auto-fit, minmax(..., 1fr))`?

[@krateskim4169]

best explanation

[@hudojnik93]

Do you have any idea how good your channel is and you only have 14 uploads so far? I have ADHD and you are the only I can actually understand.

[@horatiuranca9005]

perfection

[@Mike-rt2vp]

I can't believe it's taken so many decades to get this far for creating layouts using CSS.

[@sierraoscardelta]

epic.. didn't know of this .. now to undo my horrible hacks

[@user-gy5sm4bd2m]

Я не знаю кто ты, но ты объяснил все за 14 минут лучше, чем наши "разработчики" объясняют это все за час. Спасибо!

[@royandescartes]

The GOD off CSS

[@Kronical_Lpd]

another super clean tutorial, I could not have explained it better! Glad to see you back my guy! Classic Ramzi recording at 1am

[@anonmityslayer]

Finally legend got his password correct

[@slayingthedragon]

😂

[@RB_MAFIA]

come back with React 🔥🔥 please

[@reydantegarcia8776]

HEEYYY welcome back

[@zekimertdik7364]

We missed you so much bro. Please prepare better next time. Slaying a dragon shouldn't take this long.

[@slayingthedragon]

I agree

[@endlacer]

very nice. some Feedback: -mute or at least make the type sound quieter -bit faster pace would be nice. you sometimes Show stuff that does not matter (like that you can change the color of the grid overlay in the devTools), you said it urself 😅 - eg padding the body does not belong in this video. it has nothing todo with subgrid keep up the good work :)

[@krishjain1239]

Please tell about how to use masonry library with sidebar on a webapp.

[@FadliAlamsyah]

13:31 with style css like that, how to handle view if only one grid item?

[@kc499z3]

Hi, do you plan offer local prices for your courses? I would love to buy the css one, but my currency is weak compared to dollar.

[@slayingthedragon]

I don't, however in about a month my CSS course will be uploaded to my KZbin channel, it'll be free for everyone

[@giahuybui8323]

I added another lorem to the first box and it's width started to be bigger than the other boxes. And even with the span 3 and minmax(350px,1fr) if i add more lorem, one of the boxes starts to grow and display on top each other ;( .Can anyone explain why? ;(

[@ImprovingAryan]

teach us mern stack please

[@mrshahcloud]

Hi, what does the "span 3" means? Thanks.

[@kudorgyozo]

and what about making each item display: flex and setting flex-grow: 1 on each paragraph?

[@slayingthedragon]

Yea that's what I personally do, subgrid though is great if you're using grid

[@hamzamohammad01]

I was just thinking of doing margin-bottom: auto

[@ohtpz]

Hes back??

[@alexfurtado1759]

Slaying Thank you !!! Now you talking really slow... I can flow alone nice

[@FahadKhan-vt5nc]

Please make videos on javascript

[@luankosaka]

Is it possible to do the same thing with flexbox?

[@slayingthedragon]

Yes but it requires more divs in your HTML codepen.io/ramzibach-the-styleful/pen/QWPvYKq

[@ericsanchez2581]

Why did the span 3 work vs 1/4?

[@slayingthedragon]

1/4 explicitly anchors your element into place, whereas span 3 doesn't. They're both similar but span is more implicit which is what you need to make auto-fit and subgrid work together.

[@willb.r2055]

does anyone else likes to use flex on everything unless they absolutely need to use grid or is it just me ?

[@jeremywinston1]

i think everyone is like that.

[@SogMosee]

I use grid for everything except for buttons next to text, text next to text, or headers with an element on each side, then I use flex. Otherwise grid all the way baby. Maybe it's just the way our brains work differently...

[@devxsadik]

more sheez like this pls

[@timtim9o5]

you didn't explain the 'span 3' directive

[@slayingthedragon]

It spans an element 3 rows, what is there to explain?

[@sethhendrikz6949]

Can someone please explain the 1/4?

[@slayingthedragon]

grid-row positions an item on yours rows. 1 / 4 positions an item starting from the first row line up to the fourth row line.

[@sethhendrikz6949]

@@slayingthedragon aha! So forgive me for extending the question but a 1/2 with four box elements, what would this do?

[@slayingthedragon]

@@sethhendrikz6949 It would display only one element in your box while leaving any other element out of sight. 1 / 2 only represents one row, and with our boxes having 3 elements inside of it, it needs to span 3 rows. If we have 3 rows than we have 4 row lines, which is why you use 1 / 4. This is something done automatically usually but subgrid doesn't position items on tracks implicitly, so you tell your boxes how many rows it must span. If you tell it to span 1 / 2 rows, than you're telling your boxes to occupy one row only and therefore only one element out of 3 can be displayed.

[@sethhendrikz6949]

@@slayingthedragon an absolute genius teacher, thank you dragon! Big ups and a confident sub 🙏

[@Rio-by1eh]

Is a Grid a STACK…here ?

[@edems131]

[@avrakadavra1552]

Is it just me? this doesn't work with 2 or more rows. Still, Thank you for this

[@helluci6449]

please start using dark mode

[@rabbitcreative]

The same effect can be achieved with tables. Just saying.

[@tefkah]

who the hell wants to go back to tables man

[@fitzv.9224]

Been waiting for decades maybe? hahahah