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 KZbin. Just what I needed. Thank you!
@yosefff197 ай бұрын
I was rewatching all your previous posts and got so excited when I saw your new upload!
@Abid-if5fh7 ай бұрын
The comeback of a legend ..
@pazzuto7 ай бұрын
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.
@nox66874 ай бұрын
This is exactly the answer to the problem I was having, thank you for explaining this so concisely
@TheThirdWorldCitizen7 ай бұрын
Thanks. I didn’t appreciate subgrid until I had to work with named grids that had sticky headers
@longyuanchuan7 ай бұрын
Wonderful... This tutorial has five stars to me, it's concise, well explained, illustrative, and leaves nothing unchecked... Applause
@elasticoGomez7 ай бұрын
This is exactly what I’ve been looking for! Great content sir
@BrentTech7 ай бұрын
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.
@joel-rg8xmАй бұрын
Excellent explanation and just what I needed to showcase my cards of products. LIKE.
@LucianoClassicalGuitar6 ай бұрын
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
@alankimrey9362Ай бұрын
This was hugely helpful!
@N1rOx7 ай бұрын
great to have you bacK!
@kopilkaiser89914 ай бұрын
Great tutorial. Big thumbs up 👍🏼 I've increased my css grid knowledge thanks to you
@senseislade7 ай бұрын
finally, you've kept us waiting Ramzi
@alyssapuype7327 ай бұрын
I just watched your other videos for the 10th time. Amazing how you just uploaded one again! Waiting for the javascript course!
@IssaAbbani7 ай бұрын
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 !!
@ashutosh_tiwari7 ай бұрын
Wonderful explanation buddy!! Keep up the good work.❤️
@NTFOpenNet7 ай бұрын
🎉Wow, I finally saw your new work after such a long time. Very good tutorial~❤
@SanjayMistry.8 күн бұрын
Amazing and presented really well. thank you. 👍
@ab_tech5327 ай бұрын
Thanks bro I always enjoyed ur tutorials
@MrAndi12816 ай бұрын
Awesome Video with a great explanation!!
@andinuruljihad29127 ай бұрын
whoa this feature is incredible... great explanation, too.
@pramodnaara16 күн бұрын
thank you so much!
@jykata71347 ай бұрын
Thank you, for the helpful information! Keep making these great videos!
@MarlDenzellSilva6 ай бұрын
you're just too good at writing css, you never failed to impress me
@zack2887 ай бұрын
He’s coming back on 100k. Congrats
@danrowllet7 ай бұрын
amazing tutorial as always thank you!!
@kaiso697 ай бұрын
Thank you man please upload more video about CSS Like building actual project from start to end
@Caprice_087 ай бұрын
I needed that so much🎉🎉
@G-3-A-R-Z6 ай бұрын
Thanks for the tips, they worked out great.
@chrismachabee31287 ай бұрын
Truly a greeat lesson. Fantastic. Very uunderstandable aand vitally important thank you.
@deltaranzyd15877 ай бұрын
wow, the legend is back
@ichiroutakashima45037 ай бұрын
This channel definitely slayed!
@sadeemdzakaria30057 ай бұрын
You are one of the best CSS teacher on yt
@semperprimum267 ай бұрын
What an amazing tutorial. Thank you!
@tanis63716 ай бұрын
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;
@theworldwideweb101mystery24 ай бұрын
I needed this, thank you ❤
@bob-p7x6j7 ай бұрын
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...
@extremeboysmart7 ай бұрын
Thank you! Your explanation are great!🎉
@PolarisAlgedi5 ай бұрын
Great explanation, thanks!
@willb.r20557 ай бұрын
does anyone else likes to use flex on everything unless they absolutely need to use grid or is it just me ?
@jeremywinst7 ай бұрын
i think everyone is like that.
@SogMosee7 ай бұрын
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...
@jkovert7 ай бұрын
Flex first here.
@lashious2367 ай бұрын
i also 😂😂😂
@whyisthiscodenotworking7 ай бұрын
I use flex , because I don't know nothing in grid 😅😂
@combdn2 ай бұрын
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
@brentguiao48617 ай бұрын
Great explanation thanks❤
@clevermissfox2 ай бұрын
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!)
@slayingthedragon2 ай бұрын
@@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.
@clevermissfox2 ай бұрын
@@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 😆
@genshingamer83617 ай бұрын
What a great day when your video comes Thnx bro also expceting more new videos and your new courses also stay heathly.:)
@imtseku7 ай бұрын
Nice to see you again ✌
@godofwar82627 ай бұрын
Dragon is back 🔥
@MizManFryingPАй бұрын
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.
@mostafahamed81886 ай бұрын
Your videos help me alot thank you
@mansulol54587 ай бұрын
the king is back 😭🙏🏾🙏🏾
@yacobee7 ай бұрын
Very useful. Thank you.
@edwassermann83687 ай бұрын
very nice work. thank you!
@abdurrobr34l7 ай бұрын
After a long time got ur video... 👍👍
@FumezCreates7 ай бұрын
The master has returned 😤
@Kronical_Lpd7 ай бұрын
another super clean tutorial, I could not have explained it better! Glad to see you back my guy! Classic Ramzi recording at 1am
@heavylog1c6 ай бұрын
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.
@hriso837 ай бұрын
The best tutorials for learning css
@PicSta2 ай бұрын
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? 🙂
@ShahriarCode7 ай бұрын
ayooooo the king is back ⭐⭐
@JeffParker457 ай бұрын
Very Good! 👏👏👏
@francunhad1501Ай бұрын
best subgrid tutorial
@krishjain12397 ай бұрын
Please tell about how to use masonry library with sidebar on a webapp.
@Filaxsan7 ай бұрын
Very useful!! 💪
@FadliAlamsyah7 ай бұрын
13:31 with style css like that, how to handle view if only one grid item?
@andyl99206 ай бұрын
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
@ZockaRocka7 ай бұрын
This was perfect 👌
@ShahriarCode7 ай бұрын
man it was really helpful for me becuase i always faced prblems here
@imredoyyy7 ай бұрын
Welcome back ❤
@siig99054 ай бұрын
Idk why but once you explain it im just like oh...well...yeah that makes total sense now .
@siig99054 ай бұрын
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?
@mirjalol497 ай бұрын
U are back
@AyaanMahib7 ай бұрын
Love your videos ❤❤❤❤
@AyaanMahib7 ай бұрын
I am only 12
@Sammorris2077 ай бұрын
thanks for the clear explanation
@KelvinTawe2 ай бұрын
wooooow that was really awesome 😍😍😍😍😍😍
@codewithzero7 ай бұрын
thats great. thanks dear
@mohsinahmedohi7 ай бұрын
Worth subscribing you.
@harshalmali8567 ай бұрын
awesome video gained something new
@emmanuelmendoza81622 ай бұрын
Great video, the only trade off (as far as I know) is when you need to make it responsive.
@sar1k_14042 ай бұрын
what about display: flex; flex-direction: columns; justify-content: space-between; ?
@KarminsLynnАй бұрын
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.
@kudorgyozo7 ай бұрын
and what about making each item display: flex and setting flex-grow: 1 on each paragraph?
@slayingthedragon7 ай бұрын
Yea that's what I personally do, subgrid though is great if you're using grid
@AlThePal787 ай бұрын
I am confused, why not 1/3
@JACKoPL2 ай бұрын
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Ай бұрын
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Ай бұрын
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____________________________
@Mike-rt2vp7 ай бұрын
I can't believe it's taken so many decades to get this far for creating layouts using CSS.
@albedesigns7 ай бұрын
Great Video!
@harunyussuf35937 ай бұрын
You replied 1 min after video uploaded. Watch it first
@giahuybui83237 ай бұрын
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? ;(
@Bread-vk8fl7 ай бұрын
SO SIMPLE!!! OMG
@cbmcbm28452 ай бұрын
For some reason.box grid-row: span 3 spoiled the result when I used images of different sizes 😢
@MarcinBauer4 ай бұрын
How do you display those colored layer overlays in your DOM?
@alexdin15655 ай бұрын
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?
@ВладиславЯцковой7 ай бұрын
Я не знаю кто ты, но ты объяснил все за 14 минут лучше, чем наши "разработчики" объясняют это все за час. Спасибо!
@Dylan_thebrand_slayer_Mulveiny7 ай бұрын
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.
@jackright95307 ай бұрын
Great video
@okon16246 ай бұрын
Impressive 🤎
@krateskim41697 ай бұрын
best explanation
@najmulhoque74004 ай бұрын
gap on parent is inherited on subgrid rows , how to control this
@kaustavroy65424 ай бұрын
Loved it the vid❤
@kirbyenriquez54177 ай бұрын
wow .. thank you :))))
@royandescartes7 ай бұрын
The GOD off CSS
@kc499z37 ай бұрын
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.
@slayingthedragon7 ай бұрын
I don't, however in about a month my CSS course will be uploaded to my KZbin channel, it'll be free for everyone