Awesome Gary, great tool... I will study it to understand better this concept. Btw, Is something like this for Flexbox? Another questions are. When I should use css Grid and or Flexbox? Or Should I use both on my project? Please... talk about this concepts, Thank You.
Great video. Really instructive. But the website cssgr.id does not exist anymore ! Do you have its new URL, or another tool like this one, please ? Many thanks.
Regarding performance... and I know the purpose of this vid wasn't to address this, but... 1) is it a better or worse idea to use separate styling sheets for your media queries and a separate one for your basic style sheets? 2) Is it a better or worse idea to have a basic style sheet for your mobile site and additional style sheets that would include larger displays for screen widths above a certain size to save on the downloads required for mobile users? 3) Is it a bad practice to link have seperate media query CSS files for each break point you plan on using, with links for each different CSS up in your header?
Yooooo, for your first and second question. It's actually really simple. Multiple Css Files == Multiple Request, wich is bad. But it's easier to organize stuff right. So you can compress them afterwards into one file, minify them and save storage, as far as I know this is the best way to go. I don't really understand the last question sry :/
For query 3, what I mean is using this: This would have a style sheet for each breakpoint you want to add. Depending on how much you are changing, you could technically have a separate style sheet for each width you want to modify. Obviously this wouldn't make sense to do in some cases... it would help keep things organized for larger project, wouldn't be necessary for smaller projects... so I'm just wondering if doing things like this are a bad practice in a production environment? I was wondering if this would be good for performance on mobile, as I don't think a mobile user would have to download any files above a certain width,... I.e., would the mobile browser not fetch that style sheet above 540px and be able to save on bandwidth?
If I'm honest, I never saw the media tag used like this :'). From my experience, as less Style you have in your html as better (I know this is a media query but still). You could just create the smallscreen.css and ad the media query inside. You probebly know this already :)
Thanks for you input. I've never used it either, beyond just testing it out to see if it works in some sample file. I was just thinking about it from a mobile-first type of design, that it might allow mobile users to download ONLY the information that would be used to render info in their browser. Again woudlnt make sense in every case, but I was wondering if there were times when it would be a useful technique. Not a big deal, just something that I was thinking about.
Hi sir its me lakshman from India. I want to be an front end Web developer. So I learnt basics of HTML5, CSS3, and Java scripts from free videos on youtube. So will you suggest me to how to get into details of a Web developer, to get job easily.
"div div" globally is bad practice. I know this was just to quickly improve how it looked but for newer developers, they may take that as the way to do it. Instead, there should have been a class asses to the div's you want to style.
I think CSS grid is much better than bootstrap anyways; because it gives you a simpler markup, and it's lighter especiallly for small apps or web projects. It also matches well with Flex box.
80% of my video views come from non-subscribers. Help a guy out and subscribe if you watched this. ;)
I am always suggest my friends to watch your channel and videos :)
SURE!
Subscribing is kind of a big commitment that I’m not sure I’m ready to take.
I won't break your heart, I promise.
Great channel bro! Already subscribed hehe, love your videos
Thanks for the share Gary! I'm the creator of this 👍
Good stuff!
Great Stuff dude
Thank you both
A very interesting tool. Thank you.
Thanks for the tool :)
Would be awesome if cssgr.id could make grid -template-areas :D
16 lines of CSS, give or take, for a full layout? YEP! Thanks, Gary. Great share!
Thank you! This kind of tools really helps understand the concept.
9:54 first column's height doesn't match with 2 & 3 on you local machine, but matches exactly at cssgr.id
Why is that ?
Thanks Gary for nice tutorial and practice site
Thanks a lot for this excellent tutorial. Helped me a lot.
Omg, thank you so much for sharing the CSS Grid tool.
This is exactly what i was looking for thank you!!!
Awesome Gary, great tool... I will study it to understand better this concept. Btw, Is something like this for Flexbox?
Another questions are. When I should use css Grid and or Flexbox? Or Should I use both on my project? Please... talk about this concepts, Thank You.
Best video for css grid, thank you
liked & subscribed :)
This is totally awesome! Thanks for letting us know.
Can’t wait till they start making WordPress themes with this!
Great share Gary..
Btw I love Gary Tutorials
Digital Pixel thanks man!
Also, you don't need to redeclare the display: grid and grid-gap in each media query as it inherits the value from the first declaration.
Great video. Really instructive. But the website cssgr.id does not exist anymore ! Do you have its new URL, or another tool like this one, please ? Many thanks.
It's good example why you should use mobile-first approach ;)
Thanks for tut, very interesting. But what about first item which a little bit longer?
Regarding performance... and I know the purpose of this vid wasn't to address this, but...
1) is it a better or worse idea to use separate styling sheets for your media queries and a separate one for your basic style sheets?
2) Is it a better or worse idea to have a basic style sheet for your mobile site and additional style sheets that would include larger displays for screen widths above a certain size to save on the downloads required for mobile users?
3) Is it a bad practice to link have seperate media query CSS files for each break point you plan on using, with links for each different CSS up in your header?
Yooooo, for your first and second question. It's actually really simple.
Multiple Css Files == Multiple Request, wich is bad. But it's easier to organize stuff right.
So you can compress them afterwards into one file, minify them and save storage, as far as I know this is the best way to go.
I don't really understand the last question sry :/
For query 3, what I mean is using this:
This would have a style sheet for each breakpoint you want to add.
Depending on how much you are changing, you could technically have a separate style sheet for each width you want to modify.
Obviously this wouldn't make sense to do in some cases... it would help keep things organized for larger project, wouldn't be necessary for smaller projects... so I'm just wondering if doing things like this are a bad practice in a production environment?
I was wondering if this would be good for performance on mobile, as I don't think a mobile user would have to download any files above a certain width,... I.e., would the mobile browser not fetch that style sheet above 540px and be able to save on bandwidth?
If I'm honest, I never saw the media tag used like this :'). From my experience, as less Style you have in your html as better (I know this is a media query but still). You could just create the smallscreen.css and ad the media query inside. You probebly know this already :)
Thanks for you input. I've never used it either, beyond just testing it out to see if it works in some sample file.
I was just thinking about it from a mobile-first type of design, that it might allow mobile users to download ONLY the information that would be used to render info in their browser.
Again woudlnt make sense in every case, but I was wondering if there were times when it would be a useful technique.
Not a big deal, just something that I was thinking about.
wow this helps a ton bruw ty a lot
Why not use the max-width setting provided? Adjusting the window is very approximative...
Lot of confusions with the CSS property 'Position' . Which situations we need to use that? Can you please make a video to use the 'Position' property.
Dude..... You rock
Nice one Gary! :)
Nice video!!
this is so nice thanks
Kewl. COOOOOL!! With LUV from a subscriber.
Css grid is amazing! It makes me wonder: why do we still need bootstrap?
Gilles we dont. people are lazy.
I still use bootstrap for the Javascript components.
Hi sir its me lakshman from India. I want to be an front end Web developer. So I learnt basics of HTML5, CSS3, and Java scripts from free videos on youtube. So will you suggest me to how to get into details of a Web developer, to get job easily.
Good job! 😋 Niсe video
Nice quality
best simple things!!!!
would be awesome if cssgr.id could make grid -template-areas :D
Thanks alot
keep it up 👌🏽👍🏽
you are the man
For some reason there is now no option to control the number of rows.
Great, just make the mobile first approach instead :)
Nice tutorial but still confused with css grid. Bootstrap 4/Materialize much easier to learn.
You like superman.
"div div" globally is bad practice. I know this was just to quickly improve how it looked but for newer developers, they may take that as the way to do it. Instead, there should have been a class asses to the div's you want to style.
"real quick" is such an american thing to say
Bootstrap 4 is way better than this :/ they have to update to auto repsonsive
Digital Pixel BS4 doesn't support the CSS grid (just flexbox), so they're 2 entirely different things.
DesignCourse but we can easily use columns
I'm not sure what you're getting at.. are you talking about this tool, or the CSS grid itself?
I think CSS grid is much better than bootstrap anyways; because it gives you a simpler markup, and it's lighter especiallly for small apps or web projects. It also matches well with Flex box.
Ya Maybe I am wrong :) :)
Good job! 😋 Niсe video
Good job! 😋 Niсe video
Good job! 😋 Niсe video
Good job! 😋 Niсe video