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.

Пікірлер: 122

  • @willb.r2055
    @willb.r205515 күн бұрын

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

  • @jeremywinston1

    @jeremywinston1

    11 күн бұрын

    i think everyone is like that.

  • @SogMosee

    @SogMosee

    10 күн бұрын

    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...

  • @jkovert

    @jkovert

    8 күн бұрын

    Flex first here.

  • @lashious236

    @lashious236

    7 күн бұрын

    i also 😂😂😂

  • @whyisthiscodenotworking

    @whyisthiscodenotworking

    6 күн бұрын

    I use flex , because I don't know nothing in grid 😅😂

  • @Abid-if5fh
    @Abid-if5fh29 күн бұрын

    The comeback of a legend ..

  • @yosefff19
    @yosefff1929 күн бұрын

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

  • @elasticoGomez
    @elasticoGomez23 күн бұрын

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

  • @TheThirdWorldCitizen
    @TheThirdWorldCitizen29 күн бұрын

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

  • @jykata7134
    @jykata713429 күн бұрын

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

  • @alyssapuype732
    @alyssapuype73228 күн бұрын

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

  • @pazzuto
    @pazzuto12 күн бұрын

    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.

  • @ThelndraS
    @ThelndraS25 күн бұрын

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

  • @extremeboysmart
    @extremeboysmart22 күн бұрын

    Thank you! Your explanation are great!🎉

  • @ashutosh_tiwari
    @ashutosh_tiwari25 күн бұрын

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

  • @semperprimum26
    @semperprimum2620 күн бұрын

    What an amazing tutorial. Thank you!

  • @danrowllet
    @danrowllet27 күн бұрын

    amazing tutorial as always thank you!!

  • @issa_the_ghost1257
    @issa_the_ghost125728 күн бұрын

    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 !!

  • @longyuanchuan
    @longyuanchuan26 күн бұрын

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

  • @N1rOx
    @N1rOx29 күн бұрын

    great to have you bacK!

  • @AbubakarsadiqIdris-mz5fq
    @AbubakarsadiqIdris-mz5fq22 күн бұрын

    Thanks bro I always enjoyed ur tutorials

  • @senseislade
    @senseislade29 күн бұрын

    finally, you've kept us waiting Ramzi

  • @BrentTech
    @BrentTech29 күн бұрын

    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.

  • @edwassermann8368
    @edwassermann836829 күн бұрын

    very nice work. thank you!

  • @chrismachabee3128
    @chrismachabee312823 күн бұрын

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

  • @andinuruljihad2912
    @andinuruljihad291219 күн бұрын

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

  • @kaiso69
    @kaiso6915 күн бұрын

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

  • @Caprice_08
    @Caprice_0829 күн бұрын

    I needed that so much🎉🎉

  • @ichiroutakashima4503
    @ichiroutakashima450324 күн бұрын

    This channel definitely slayed!

  • @zack288
    @zack28829 күн бұрын

    He’s coming back on 100k. Congrats

  • @yacobee
    @yacobee20 күн бұрын

    Very useful. Thank you.

  • @abdurrobr34l
    @abdurrobr34l29 күн бұрын

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

  • @brentguiao4861
    @brentguiao486113 күн бұрын

    Great explanation thanks❤

  • @imtseku
    @imtseku28 күн бұрын

    Nice to see you again ✌

  • @deltaranzyd1587
    @deltaranzyd158729 күн бұрын

    wow, the legend is back

  • @Sammorris207
    @Sammorris2079 күн бұрын

    thanks for the clear explanation

  • @genshingamer8361
    @genshingamer836125 күн бұрын

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

  • @sadeemdzakaria3005
    @sadeemdzakaria300517 күн бұрын

    You are one of the best CSS teacher on yt

  • @user-eo1vz9lt8g
    @user-eo1vz9lt8g29 күн бұрын

    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...

  • @Filaxsan
    @Filaxsan25 күн бұрын

    Very useful!! 💪

  • @ShahriarCode
    @ShahriarCode29 күн бұрын

    ayooooo the king is back ⭐⭐

  • @JeffParker45
    @JeffParker4524 күн бұрын

    Very Good! 👏👏👏

  • @FumezCreates
    @FumezCreates25 күн бұрын

    The master has returned 😤

  • @hriso83
    @hriso8328 күн бұрын

    The best tutorials for learning css

  • @ShahriarCode
    @ShahriarCode29 күн бұрын

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

  • @harshalmali856
    @harshalmali85620 күн бұрын

    awesome video gained something new

  • @mansulol5458
    @mansulol545816 күн бұрын

    the king is back 😭🙏🏾🙏🏾

  • @ZockaRocka
    @ZockaRocka24 күн бұрын

    This was perfect 👌

  • @mohsinahmedohi
    @mohsinahmedohi27 күн бұрын

    Worth subscribing you.

  • @godofwar8262
    @godofwar826228 күн бұрын

    Dragon is back 🔥

  • @codewithzero
    @codewithzero22 күн бұрын

    thats great. thanks dear

  • @Kronical_Lpd
    @Kronical_Lpd29 күн бұрын

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

  • @AyaanMahib
    @AyaanMahib29 күн бұрын

    Love your videos ❤❤❤❤

  • @AyaanMahib

    @AyaanMahib

    29 күн бұрын

    I am only 12

  • @mirjalol49
    @mirjalol4929 күн бұрын

    U are back

  • @jackright9530
    @jackright953017 күн бұрын

    Great video

  • @hudojnik93
    @hudojnik9320 күн бұрын

    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.

  • @imredoyyy
    @imredoyyy28 күн бұрын

    Welcome back ❤

  • @Mike-rt2vp
    @Mike-rt2vp26 күн бұрын

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

  • @albedesigns
    @albedesigns29 күн бұрын

    Great Video!

  • @harunyussuf3593

    @harunyussuf3593

    29 күн бұрын

    You replied 1 min after video uploaded. Watch it first

  • @Dylan_thebrand_slayer_Mulveiny
    @Dylan_thebrand_slayer_Mulveiny29 күн бұрын

    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.

  • @sierraoscardelta
    @sierraoscardelta21 күн бұрын

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

  • @okon1624
    @okon162421 сағат бұрын

    Impressive 🤎

  • @timothyshiu2263
    @timothyshiu226325 күн бұрын

    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
    @krateskim416928 күн бұрын

    best explanation

  • @user-gy5sm4bd2m
    @user-gy5sm4bd2m28 күн бұрын

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

  • @Igor-vk8fl
    @Igor-vk8fl22 күн бұрын

    SO SIMPLE!!! OMG

  • @andyl9920
    @andyl99203 күн бұрын

    Geez u make it look so easy. And great explaination! I guess media queries is really not needed. Question tho. How do i move an image that is on the right side of the viewport to go above the text on the left side when viewing in smaller screens? So normal size/big screen Text and Image will be next to one another. Please help

  • @kirbyenriquez5417
    @kirbyenriquez541726 күн бұрын

    wow .. thank you :))))

  • @horatiuranca9005
    @horatiuranca900525 күн бұрын

    perfection

  • @royandescartes
    @royandescartes18 күн бұрын

    The GOD off CSS

  • @krishjain1239
    @krishjain123929 күн бұрын

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

  • @anonmityslayer
    @anonmityslayer22 күн бұрын

    Finally legend got his password correct

  • @slayingthedragon

    @slayingthedragon

    22 күн бұрын

    😂

  • @endlacer
    @endlacer26 күн бұрын

    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 :)

  • @reydantegarcia8776
    @reydantegarcia877629 күн бұрын

    HEEYYY welcome back

  • @zekimertdik7364
    @zekimertdik736429 күн бұрын

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

  • @slayingthedragon

    @slayingthedragon

    29 күн бұрын

    I agree

  • @themarksmith
    @themarksmith8 күн бұрын

    useful sh*t - thanks!

  • @FadliAlamsyah
    @FadliAlamsyah18 күн бұрын

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

  • @giahuybui8323
    @giahuybui832313 күн бұрын

    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? ;(

  • @kudorgyozo
    @kudorgyozo23 күн бұрын

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

  • @slayingthedragon

    @slayingthedragon

    23 күн бұрын

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

  • @kc499z3
    @kc499z319 күн бұрын

    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

    @slayingthedragon

    19 күн бұрын

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

  • @ohtpz
    @ohtpz29 күн бұрын

    Hes back??

  • @RB_MAFIA
    @RB_MAFIA29 күн бұрын

    come back with React 🔥🔥 please

  • @ImprovingAryan
    @ImprovingAryan25 күн бұрын

    teach us mern stack please

  • @mrshahcloud
    @mrshahcloud25 күн бұрын

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

  • @hamzamohammad01
    @hamzamohammad0122 күн бұрын

    I was just thinking of doing margin-bottom: auto

  • @luankosaka
    @luankosaka9 күн бұрын

    Is it possible to do the same thing with flexbox?

  • @slayingthedragon

    @slayingthedragon

    9 күн бұрын

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

  • @FahadKhan-vt5nc
    @FahadKhan-vt5nc29 күн бұрын

    Please make videos on javascript

  • @ericsanchez2581
    @ericsanchez258119 күн бұрын

    Why did the span 3 work vs 1/4?

  • @slayingthedragon

    @slayingthedragon

    19 күн бұрын

    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.

  • @AlThePal78
    @AlThePal787 күн бұрын

    I am confused, why not 1/3

  • @alexfurtado1759
    @alexfurtado175925 күн бұрын

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

  • @timtim9o5
    @timtim9o523 күн бұрын

    you didn't explain the 'span 3' directive

  • @slayingthedragon

    @slayingthedragon

    23 күн бұрын

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

  • @devxsadik
    @devxsadik19 күн бұрын

    more sheez like this pls

  • @avrakadavra1552
    @avrakadavra155217 күн бұрын

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

  • @sethhendrikz6949
    @sethhendrikz694921 күн бұрын

    Can someone please explain the 1/4?

  • @slayingthedragon

    @slayingthedragon

    21 күн бұрын

    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

    @sethhendrikz6949

    21 күн бұрын

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

  • @slayingthedragon

    @slayingthedragon

    21 күн бұрын

    @@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

    @sethhendrikz6949

    21 күн бұрын

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

  • @Rio-by1eh
    @Rio-by1eh20 күн бұрын

    Is a Grid a STACK…here ?

  • @helluci6449
    @helluci644919 күн бұрын

    please start using dark mode

  • @edems131
    @edems13129 күн бұрын

  • @jippee1
    @jippee15 күн бұрын

    Why would this be returned to the design team looking nothing like the prototype. It boggles my mind when the programmers can't just match the design 1 to 1 before sending it back

  • @fitzv.9224
    @fitzv.922428 күн бұрын

    Been waiting for decades maybe? hahahah

  • @rabbitcreative
    @rabbitcreative25 күн бұрын

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

  • @tefkah

    @tefkah

    17 күн бұрын

    who the hell wants to go back to tables man

  • @avneet12284
    @avneet122848 күн бұрын

    Good video but not well explained

Келесі