Learn CSS Subgrid in 14 minutes

Поділитися
Вставка
  • Опубліковано 12 січ 2025

КОМЕНТАРІ • 182

  • @ahooton
    @ahooton 5 місяців тому +15

    I've just implemented Subgrid for the first time on my latest project and this was by far the most beginner friendly tutorial I came across on UA-cam. Just what I needed. Thank you!

  • @Abid-if5fh
    @Abid-if5fh 8 місяців тому +69

    The comeback of a legend ..

  • @heavylog1c
    @heavylog1c 7 місяців тому +3

    I think this is possible with flex. You just wrap this boxex with flex item, make boxes stretch vertically. And then align images to the bottom. But this subgrid thing looks pretty cool.

  • @yosefff19
    @yosefff19 8 місяців тому +9

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

  • @pazzuto
    @pazzuto 7 місяців тому +7

    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.

  • @TheThirdWorldCitizen
    @TheThirdWorldCitizen 8 місяців тому +17

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

  • @nox6687
    @nox6687 5 місяців тому +3

    This is exactly the answer to the problem I was having, thank you for explaining this so concisely

  • @BrentTech
    @BrentTech 8 місяців тому +8

    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.

  • @longyuanchuan
    @longyuanchuan 8 місяців тому +3

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

  • @elasticoGomez
    @elasticoGomez 8 місяців тому +4

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

  • @alyssapuype732
    @alyssapuype732 8 місяців тому +2

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

  • @senseislade
    @senseislade 8 місяців тому +2

    finally, you've kept us waiting Ramzi

  • @LucianoClassicalGuitar
    @LucianoClassicalGuitar 7 місяців тому +1

    You are the best bro. I was struggling with cards for my portfolio trying to do stuff with grid and everything and you taught me a lot with just a few lines. Still a little confused with the minmax() and how grid works still. But at least I have something that is working

  • @MarlDenzellSilva
    @MarlDenzellSilva 7 місяців тому +1

    you're just too good at writing css, you never failed to impress me

  • @joel-rg8xm
    @joel-rg8xm 2 місяці тому +1

    Excellent explanation and just what I needed to showcase my cards of products. LIKE.

  • @N1rOx
    @N1rOx 8 місяців тому +3

    great to have you bacK!

  • @IssaAbbani
    @IssaAbbani 8 місяців тому +2

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

  • @jykata7134
    @jykata7134 8 місяців тому +2

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

  • @NTFOpenNet
    @NTFOpenNet 8 місяців тому +2

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

  • @tanis6371
    @tanis6371 7 місяців тому

    For this partcular layout you can use flexbox to push the images at the edge of their containers, you just have to use flex-direction:column; and margin-top:auto;

  • @zack288
    @zack288 8 місяців тому +8

    He’s coming back on 100k. Congrats

  • @andinuruljihad2912
    @andinuruljihad2912 8 місяців тому +2

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

  • @alankimrey9362
    @alankimrey9362 2 місяці тому +1

    This was hugely helpful!

  • @kopilkaiser8991
    @kopilkaiser8991 5 місяців тому +1

    Great tutorial. Big thumbs up 👍🏼 I've increased my css grid knowledge thanks to you

  • @willb.r2055
    @willb.r2055 7 місяців тому +99

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

    • @jeremywinst
      @jeremywinst 7 місяців тому +7

      i think everyone is like that.

    • @SogMosee
      @SogMosee 7 місяців тому +11

      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 7 місяців тому +5

      Flex first here.

    • @lashious236
      @lashious236 7 місяців тому +2

      i also 😂😂😂

    • @whyisthiscodenotworking
      @whyisthiscodenotworking 7 місяців тому +6

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

  • @ashutosh_tiwari
    @ashutosh_tiwari 8 місяців тому +3

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

  • @bob-p7x6j
    @bob-p7x6j 8 місяців тому +1

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

  • @kaiso69
    @kaiso69 7 місяців тому +1

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

  • @MrAndi1281
    @MrAndi1281 7 місяців тому +2

    Awesome Video with a great explanation!!

  • @ab_tech532
    @ab_tech532 8 місяців тому +2

    Thanks bro I always enjoyed ur tutorials

  • @chrismachabee3128
    @chrismachabee3128 8 місяців тому +1

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

  • @danrowllet
    @danrowllet 8 місяців тому +2

    amazing tutorial as always thank you!!

  • @ichiroutakashima4503
    @ichiroutakashima4503 8 місяців тому +1

    This channel definitely slayed!

  • @combdn
    @combdn 3 місяці тому

    The explanation starts around 8:13. And it ends around 11:46.
    So, about 3 minutes in total
    >2x speed works great. It makes it

  • @semperprimum26
    @semperprimum26 8 місяців тому +1

    What an amazing tutorial. Thank you!

  • @G-3-A-R-Z
    @G-3-A-R-Z 6 місяців тому +1

    Thanks for the tips, they worked out great.

  • @sadeemdzakaria3005
    @sadeemdzakaria3005 8 місяців тому +1

    You are one of the best CSS teacher on yt

  • @deltaranzyd1587
    @deltaranzyd1587 8 місяців тому +3

    wow, the legend is back

  • @genshingamer8361
    @genshingamer8361 8 місяців тому +2

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

  • @SanjayMistry.
    @SanjayMistry. 29 днів тому

    Amazing and presented really well. thank you. 👍

  • @clevermissfox
    @clevermissfox 3 місяці тому +1

    Yay subgrid!! It took me a long time to understand how using subgrid differed from just using an `inherit` on g-t-column or g-t-r ;
    Btw it’s not recommended to create gutters by giving the body width:90% ; it can affect how margins and padding are calculated , create unexpected scroll bars ,alignment and overflow issues, esp for responsive screen sizes. Better to use some kind of wrapper with padding and/or a max-width (or width: min(100%, 60ch)! I lovelovelove the min function!)

    • @slayingthedragon
      @slayingthedragon  3 місяці тому +1

      @@clevermissfox I agree with you about the gutters. For the purposes of creating a video about a specific subject, I'll often take shortcuts towards whatever is unrelated to the subject being presented, thus gutters on the body.

    • @clevermissfox
      @clevermissfox 3 місяці тому +1

      @@slayingthedragon I understand, I’ve done the same by putting flex/grid on the body to center the project , I just worry about beginners not knowing and picking up bad habits. Thanks for the video, for some reason I find subgrid easier than not several grids; maybe bc there’s only one grid to configure/wrestle with 😆

  • @Kronical_Lpd
    @Kronical_Lpd 8 місяців тому +2

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

  • @Caprice_08
    @Caprice_08 8 місяців тому +2

    I needed that so much🎉🎉

  • @theworldwideweb101mystery2
    @theworldwideweb101mystery2 5 місяців тому

    I needed this, thank you ❤

  • @abdurrobr34l
    @abdurrobr34l 8 місяців тому +2

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

  • @extremeboysmart
    @extremeboysmart 8 місяців тому +1

    Thank you! Your explanation are great!🎉

  • @hriso83
    @hriso83 8 місяців тому +1

    The best tutorials for learning css

  • @MizManFryingP
    @MizManFryingP 2 місяці тому

    Amazing explanation!
    Question though - how would I go about creating a gap *between* subgrids without affecting the gap of the elements within?
    Say for example, I am creating a blog grid, kind of like the one in the video. I want the gap between the header, the excerpt and the flower image to be .5rem, but I want the gap between each card to be some big number like 8rem. I noticed that at that point subgrid breaks apart, forcing the individual items to become way larger than they are. This is still the case even if we 'override' the gap in the subgrid.

  • @ShahriarCode
    @ShahriarCode 8 місяців тому +2

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

  • @siig9905
    @siig9905 5 місяців тому +1

    Idk why but once you explain it im just like oh...well...yeah that makes total sense now .

    • @siig9905
      @siig9905 5 місяців тому

      There is one part I don't understand, what's up with the 1/4 for grid rows? Is it just stating that each one is only one fourth or a total of four grid items? And if that's the case why wouldn't it go under grid columns since the items are spanning across four columns?

  • @FadliAlamsyah
    @FadliAlamsyah 8 місяців тому

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

  • @imtseku
    @imtseku 8 місяців тому +1

    Nice to see you again ✌

  • @mansulol5458
    @mansulol5458 8 місяців тому +1

    the king is back 😭🙏🏾🙏🏾

  • @PolarisAlgedi
    @PolarisAlgedi 5 місяців тому +1

    Great explanation, thanks!

  • @FumezCreates
    @FumezCreates 8 місяців тому +1

    The master has returned 😤

  • @cbmcbm2845
    @cbmcbm2845 3 місяці тому

    For some reason.box grid-row: span 3 spoiled the result when I used images of different sizes 😢

  • @Mike-rt2vp
    @Mike-rt2vp 8 місяців тому +1

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

  • @brentguiao4861
    @brentguiao4861 7 місяців тому +1

    Great explanation thanks❤

  • @mostafahamed8188
    @mostafahamed8188 7 місяців тому +1

    Your videos help me alot thank you

  • @PicSta
    @PicSta 3 місяці тому

    Excellent subgrid tutorial, really love the way you teach and explain things simple. The only thing, I can't get to work using subgrid and media queries same time. For example, I want to have 4 boxes in a row for desktop, but 2 boxes on tabled and 1 on mobile. How do I have to change that code? 🙂

  • @pramodnaara
    @pramodnaara Місяць тому +1

    thank you so much!

  • @francunhad1501
    @francunhad1501 2 місяці тому +1

    best subgrid tutorial

  • @godofwar8262
    @godofwar8262 8 місяців тому +2

    Dragon is back 🔥

  • @emmanuelmendoza8162
    @emmanuelmendoza8162 3 місяці тому

    Great video, the only trade off (as far as I know) is when you need to make it responsive.

  • @Dylan_thebrand_slayer_Mulveiny
    @Dylan_thebrand_slayer_Mulveiny 8 місяців тому +1

    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.

  • @edwassermann8368
    @edwassermann8368 8 місяців тому +1

    very nice work. thank you!

  • @ShahriarCode
    @ShahriarCode 8 місяців тому +1

    ayooooo the king is back ⭐⭐

  • @krishjain1239
    @krishjain1239 8 місяців тому +1

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

  • @yacobee
    @yacobee 8 місяців тому +1

    Very useful. Thank you.

  • @KelvinTawe
    @KelvinTawe 3 місяці тому +1

    wooooow that was really awesome 😍😍😍😍😍😍

  • @ImprovingAryan
    @ImprovingAryan 8 місяців тому +3

    teach us mern stack please

  • @andyl9920
    @andyl9920 7 місяців тому

    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

  • @hudojnik93
    @hudojnik93 8 місяців тому +1

    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.

  • @AyaanMahib
    @AyaanMahib 8 місяців тому +1

    Love your videos ❤❤❤❤

  • @mirjalol49
    @mirjalol49 8 місяців тому +3

    U are back

  • @AlThePal78
    @AlThePal78 7 місяців тому +6

    I am confused, why not 1/3

    • @JACKoPL
      @JACKoPL 3 місяці тому

      The first element of the box is between the first and second grid lines. The second element is between the second and third grid lines... So since we have three elements, that's 1/4.

    • @joel-rg8xm
      @joel-rg8xm 2 місяці тому

      Exactly! 1/3 would mean 2 rows but since we need 3 rows (heading, paragraph, image) we have to use 1/4 which means "from line 1 to line 4) which refers to 3 rows

    • @emgodas
      @emgodas Місяць тому

      Got it just like this:
      1st line is header title to description
      2nd line is description to image
      3rd line is image to end
      1 start __________________________
      Title/Header
      2 _______________________________
      Description
      3 _______________________________
      Image
      4 end____________________________

  • @imredoyyy
    @imredoyyy 8 місяців тому +1

    Welcome back ❤

  • @harshalmali856
    @harshalmali856 8 місяців тому +1

    awesome video gained something new

  • @93simongh
    @93simongh 6 місяців тому +1

    "learn" is when you can apply what you saw in this video a week from today without rewatching it. This is more like "see how it works..."

  • @giahuybui8323
    @giahuybui8323 7 місяців тому

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

  • @Sammorris207
    @Sammorris207 7 місяців тому

    thanks for the clear explanation

  • @MarcinBauer
    @MarcinBauer 4 місяці тому

    How do you display those colored layer overlays in your DOM?

  • @Filaxsan
    @Filaxsan 8 місяців тому +1

    Very useful!! 💪

  • @anonmityslayer
    @anonmityslayer 8 місяців тому +1

    Finally legend got his password correct

  • @kudorgyozo
    @kudorgyozo 8 місяців тому +1

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

    • @slayingthedragon
      @slayingthedragon  8 місяців тому

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

  • @ВладиславЯцковой
    @ВладиславЯцковой 8 місяців тому +1

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

  • @mohsinahmedohi
    @mohsinahmedohi 8 місяців тому +1

    Worth subscribing you.

  • @albedesigns
    @albedesigns 8 місяців тому +1

    Great Video!

    • @harunyussuf3593
      @harunyussuf3593 8 місяців тому +2

      You replied 1 min after video uploaded. Watch it first

  • @alexdin1565
    @alexdin1565 5 місяців тому

    this is my first time i watch your videos and really it very helpful, please why when we use images with different sizes and orientation the designed broken?

  • @ZockaRocka
    @ZockaRocka 8 місяців тому +1

    This was perfect 👌

  • @JeffParker45
    @JeffParker45 8 місяців тому +1

    Very Good! 👏👏👏

  • @sar1k_1404
    @sar1k_1404 3 місяці тому

    what about display: flex; flex-direction: columns; justify-content: space-between; ?

    • @KarminsLynn
      @KarminsLynn 2 місяці тому

      tops of the text boxes will not be aligned with each other, because if you have less text, flexbox will force it to stay in the cross-center.

  • @RB_MAFIA
    @RB_MAFIA 8 місяців тому +7

    come back with React 🔥🔥 please

  • @najmulhoque7400
    @najmulhoque7400 5 місяців тому

    gap on parent is inherited on subgrid rows , how to control this

  • @zekimertdik7364
    @zekimertdik7364 8 місяців тому +1

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

  • @kc499z3
    @kc499z3 8 місяців тому

    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  8 місяців тому +1

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

  • @mrshahcloud
    @mrshahcloud 8 місяців тому

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

  • @ohtpz
    @ohtpz 8 місяців тому +2

    Hes back??

  • @endlacer
    @endlacer 8 місяців тому +1

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

  • @jackright9530
    @jackright9530 8 місяців тому +1

    Great video