CSS Grid: Autofit & MinMax | Web Development Tutorials #43
CSS Grid: Autofit & MinMax | Web Development Tutorials #43
► Source Code \u0026 Notes: https://codewithharry.com/videos/web-…
►This video is a part of this Complete Web Development in Hindi Course Playlist: • Web Development Tutorials For Beginne…
►Click here to subscribe - / @codewithharry
►Checkout my English channel here: / programmingwithharry
Best Hindi Videos For Learning Programming:
►Learn Python In One Video - • Python Tutorial In Hindi 🔥
►Python Complete Course In Hindi - • Python Tutorials For Absolute Beginne…
►C Language Complete Course In Hindi -
• C Language Tutorials In Hindi
►JavaScript Complete Course In Hindi -
• JavaScript Tutorials In Hindi
►Learn JavaScript in One Video - • JavaScript Tutorial
►Learn PHP In One Video - • Learn Php In One Video In Hindi - हिं…
►Django Complete Course In Hindi -
• Python Django Tutorials In Hindi
►Machine Learning Using Python - • Machine Learning Tutorials For Beginn…
►Creating \u0026 Hosting A Website (Tech Blog) Using Python - • [Hindi] Web Development Using Flask a…
►Advanced Python Tutorials - • Intermediate/Advanced python Tutorial…
►Object Oriented Programming In Python - • Object Oriented Programming Tutorials…
►Python Data Science and Big Data Tutorials - • Python Data Science and Big Data Tuto…
Follow Me On Social Media
►Website (created using Flask) - http://www.codewithharry.com
►Facebook - https://www.facebook.com/CodeWithHarry
►Instagram - https://www.instagram.com/codewithharry/
►Personal Facebook A/c - https://www.facebook.com/geekyharis
Twitter - https://twitter.com/Haris_Is_Here
Content
0.132 -> Recently, in the course of web development
2.359 -> we appreciated the grid layout, which was ours
4.783 -> the display grid which is ours of CSS
8.373 -> We saw how easily it helps us to create layouts
12.789 -> will do one thing here now
14.334 -> will quickly create a new file
15.922 -> And we'll name it, tut43.html
19.152 -> and here we'll quickly put a boiler plate of HTML
23.892 -> and here we'll write what?
26.155 -> CSS Grid
27.678 -> and see more awesome stuff of CSS Grid that what happens
31.244 -> but you haven't accessed this playlist before
33.565 -> So, click here to bookmark it, and save it by clicking here
36.758 -> Many people comment and tell me
38.187 -> that why do you repeat the same thing again and again
39.792 -> But I repeat because in every video I want to mention
42.533 -> that this is a playlist and here is the complete course.
45.129 -> Because people tell me again by commenting
46.821 -> that you made videos from the beginning
48.41 -> so, I have to do this
49.84 -> So here what we will do now
51.395 -> let's quickly look at the grid
53.741 -> and let's make a basic grid
56.821 -> First of all, I will put a style tag here, for the css
59.884 -> I will make a container
64.416 -> what will I do inside the container
65.934 -> I will make boxes
67.088 -> And these are the boxes
70.004 -> I'll put the content inside the item-$
73.689 -> and make it how many?
76.199 -> 12
78.197 -> and give to the container
81.473 -> container
84.126 -> I wrote container here
85.326 -> and what I will do here
86.574 -> I will give this display: grid, OK
90.955 -> and what I will do with that
94.71 -> Here I will do a little styling of the box
97.908 -> border: 2px solid black
102.259 -> and here I will give the grid-gap
108.376 -> how many grid-gap should I keep?
109.369 -> I keep 1rem
110.711 -> And here let's see how it looks
112.113 -> I haven't tried the live server yet
114.364 -> I just turned on the live server
115.609 -> And look it looks like this
117.636 -> so now I want to tell you here
119.784 -> that how I will give it the layout of your choice
123.128 -> So here I am also giving it background-color
125.661 -> and there is a slight color
128.242 -> I give it, its spelling is very dangerous
130.85 -> I don't want to pronounce it
132.456 -> but here I will give it a background
135.694 -> and it looks a little light to me
137.151 -> So here I am using my picker to make it something like this
142.383 -> We should be fine
143.571 -> I changed the border-color here,
145.305 -> I should have changed the background-color
149.207 -> only then I can tell why it is coming like this
150.961 -> Now look, yes, now it is done the way I wanted
154.039 -> so, I have given padding a little
157.089 -> a little more padding has given but it should be fine, ok
160.201 -> Now here's what we'll do
161.913 -> Let's see how we can set it up according to our own
165.998 -> so here I'm going to see if grid-template-columns
168.815 -> I told you about this earlier also
170.982 -> write that
172.375 -> so, what can I do here
173.647 -> I can write how many columns I want
175.557 -> For example, here I made 12 pixels by 12 pixels by 12 pixels
180.172 -> and after doing this
182.22 -> as soon as I do this thing
183.576 -> So, look at this, there should have been 3 columns
186.646 -> see 12 pixels I put it in the wrong place
188.922 -> I should have put it in my grid
191.181 -> 12 pixels 12 pixels 12 pixels
193.044 -> There are 3 columns of 12-12 pixels, ok
195.969 -> and here's what happens
197.113 -> that it looks like this space is falling a little bit for them
199.081 -> Let's do one thing, increase them, make it 112-112
202.04 -> because 12 pixels will be very less
204.066 -> Yes, now look
204.73 -> it has fixed itself in place by taking 12-12 pixels, ok
209.771 -> Now here what I want to do
211.115 -> I want to show you here
212.437 -> that you can justify-content: center here
219.025 -> And align-items can also be centered
221.027 -> so, by centering justify-content
222.772 -> it all in the middle
224.429 -> So, this was the technique
225.183 -> with the help of which you can center the items
227.587 -> But here if I want to do something like this
230.469 -> that whenever I change its size
232.413 -> then it becomes responsive to me
234.524 -> Like if I change its size now
237.269 -> then I am not getting anything special
239.485 -> and I am doing one thing right here
241.409 -> slightly changing it to 1fr 1fr 1fr
246.674 -> and i do it as 1fr 1fr 1fr, ok
252.824 -> and it removes justify-content: center for now
254.942 -> I just wanted to show you the centering
257.383 -> Now look over here, as soon as I have done it
259.081 -> then I make it so small
260.307 -> so, it is coming as many as the number of columns.
263.067 -> but i want to have some folding etc.
265.19 -> and i see it in beautiful layout
267.964 -> like i am showing images etc. with the help of my grid
271.095 -> so, i want any of my user
272.687 -> who is viewing this website in phone
274.409 -> he sees this number of rows a little less
277.702 -> And the person who is watching this in a big screen
279.787 -> he should see a little more of Numbers of Rows,
281.565 -> see a little more of Numbers of Columns
283.517 -> Accordingly, work should be done here
286.472 -> according to it, auto-adjust it yourself.
289.328 -> so, what do we do for this
291.102 -> What will I do here
292.306 -> see in grid-template-columns
293.887 -> I will also comment it out here
296.057 -> And here I'll write gtc for grid-template-column,
300.234 -> hit enter
301.383 -> and here I'll write repeat, I want to repeat
305.362 -> First of all, I will write auto-fit here
306.862 -> what will happen by writing auto-fit
308.361 -> that it will repeat here as many times as possible, okay?
313.057 -> then I will put a minmax here
315.903 -> what will i do in minmax
317.342 -> i will say minimum to 400 pixels
320.352 -> That is, make the minimum that is 400 pixels
324.018 -> and make the maximum 1fr
325.715 -> that is, this thing, these values, these individual values
328.333 -> Set these individual values in such a way
330.337 -> that minimum 400 pixels, maximum 1fr
333.483 -> so, what will I get benefit by doing this here
336.365 -> I will enlarge it
337.331 -> so, look it has given a responsive type of look and feel
341.042 -> That is, look, I will make it so small
342.194 -> then it has come like this
343.199 -> so, where it helps us
346.578 -> In making responsive websites
348.253 -> if I want it to look like this in the phone
349.564 -> see this phone is comfortable to read it
351.795 -> And this is you can read in a big pc with great ease
354.647 -> so, the grid is also very useful for creating responsive layouts
357.767 -> Now here I show you one thing
359.75 -> here is item 12, if I put item 13 also that what will happen here
362.871 -> I will show one thing
365.124 -> The good thing is that by entering item 13
367.226 -> this item will come here
368.748 -> but you may want this
370.447 -> item to come down according to your own
373.417 -> Or you want this item to be center
375.735 -> so, you have to write your own CSS for that
379.524 -> now what some people do
380.646 -> also use media queries
382.065 -> and I will also show you by putting media queries inside the grid
384.826 -> how you can do this by using media queries
387.791 -> But here just want to tell what happens in minmax
390.247 -> what should be the minimum width
392.673 -> if it is 300
393.834 -> then what can be the minimum, can be 300
395.73 -> So, look here it's come look
397.863 -> and look over here as I grew it
401.26 -> look at this minimum 300, maximum 1fr
405.784 -> That is, how much will be the maximum
407.312 -> 1fr will be completed, 1 will come
409.487 -> suppose if I make the maximum 400
411.877 -> the maximum will be 400, then see what will happen
416.143 -> What will happen by doing maximum 400
417.501 -> maximum will remain 400
418.897 -> and I do one thing at maximum, I reduce the value a little.
421.694 -> I have increased the value a little
424.011 -> I do one thing, I make the minimum 30 pixels,
425.925 -> the maximum 40 pixels
427.486 -> then see what will happen
428.593 -> I'll do it like this so look, minimum how many
432.617 -> how many items is this, 1, 2, 3, 4, 5, 6, OK
435.852 -> so, what's going on here
437.28 -> At least I want the width of their item 30 pixels
440.462 -> at least, that is, the width cannot be less than this
442.369 -> now it will fold where it seems to be decreasing
444.996 -> And how the maximum it can be
446.923 -> the maximum can be 40 pixels
449.231 -> so maximum it will stretch only 40 pixels
451.205 -> more than that it will not allow it to stretch
453.012 -> So, in this way you can set the value of minmax
455.648 -> and you can also write it in fr, ok
460.368 -> I have made 300 pixels 1fr
461.712 -> But I hope you must have understood Minmax
464.727 -> I am reloading it from the back
466.401 -> and here I have given it the responsive, I do it like this.
470.375 -> I'll be back to responsive
471.805 -> so, look at the right place
473.361 -> so, in this way we can create a responsive website
476.847 -> with the help of grid
478.298 -> Now if I come to the same question
479.943 -> That Grid has to use that,
481.027 -> Flexbox has to use that,
481.997 -> Float has to use that.
483.327 -> Or simply if we can work by putting someone else CSS
487.103 -> then will do it
487.68 -> then I will say that as long as you are comfortable,
490.818 -> you can use anything
492.14 -> Just what is the main thing
493.565 -> what do you have to take care of
494.938 -> of development time
496.401 -> your developer should not have any problem
498.471 -> in maintaining the website
499.42 -> Because once made, it is not that it will remain once
502.22 -> until and unless you don't care much about it
504.348 -> If you care about it
505.767 -> then definitely you want his development to continue
509.424 -> And you keep improving that website continuously
512.35 -> So, if you want time-to-time improvement
514.248 -> then you will want to use something that makes sense
517.428 -> That is, it is understood on seeing the code
520.03 -> now those who are good programmers
522.118 -> those who are programmers write code for themselves.
525.271 -> And those who are good programmers write code for others
527.544 -> that is, for other programmers so that they can understand
529.621 -> So, writing code that others can understand
532.208 -> is a very fine art
534.224 -> and you need to do that.
536.093 -> Because today's employers are looking at this art
538.662 -> and according to this art
539.688 -> you will get a lot of appreciation, jobs
542.36 -> Or you can get whatever field you want to go
545.71 -> because what happens in this is
547.218 -> that a lot of money is saved for a company.
549.967 -> If you write code that is maintainable
553.298 -> then hopefully you will understand
554.809 -> we have almost finished CSS here
557.941 -> we'll give it a good finish
560.101 -> and then we'll move to JavaScript
561.868 -> so, hope you like this video
564.196 -> If you have not accessed this playlist yet
566.056 -> then bookmark this playlist
567.917 -> and you can save it by bookmarking it
570.331 -> Bookmark by clicking here, and save it by clicking here
572.894 -> only one will be saved
574.093 -> You will get this playlist here
575.468 -> so, you will remember that you have to study this too
577.994 -> So, if I used to study like this on my own time
579.916 -> Infact, I will tell you another technique
581.895 -> I used to edit it in caps
584.409 -> and I used to write something like this
586.722 -> Important study now
590.838 -> I am doing that technique with you
592.719 -> as I used to do it
595.089 -> web development study now
596.795 -> now it is not necessary to have correct English
597.859 -> but here I wrote it like this
599.681 -> I have stand it here
601.122 -> so, i will remember
602 -> that yes i want to study web development
603.948 -> so, i will delete this bookmark for now
606.266 -> I would like to keep my normal bookmark only
608.397 -> so, you can use it if you want to complete this course well.
614.737 -> Because to complete the big course
616.323 -> you have to show a little bit of patience,
618.765 -> practice and consistency from your side.
621.989 -> So, if you like these videos then kindly give me a like
625.398 -> and at the same time, you must have accessed this playlist.
628.259 -> SUBSCRIBE the channel too
629.926 -> if you want to see more such courses
632.283 -> for now, that's all in this video
633.929 -> Thankyou so much guys for watching this video
635.664 -> And i will see you next time.
Source: https://www.youtube.com/watch?v=QAv7TsE18QM