CSS Grid: Spanning Multiple Rows and Columns in Grid | Web Development Tutorials #42
CSS Grid: Spanning Multiple Rows and Columns in Grid | Web Development Tutorials #42
► 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.084 -> In the previous video we saw about the grid
2.976 -> we talked about the grid over there
5 -> Today I am going to talk about spanning here
7.152 -> how do I do it in Gird
8.467 -> so here is what we saw in the previous video
10.24 -> How can we make a basic grid with columns and rows
14.232 -> And what will I do here
16.291 -> First of all, I dispose of this port
18.451 -> and make a new file
20.771 -> tut42.html
22.473 -> and put a boiler plate here
25.026 -> And at the same time, I told you a lot about the grid here
29.548 -> so here we talked about
31.03 -> Looking at an image
31.744 -> it is good to get a grid, to understand the grid
33.276 -> we talked here that what is a grid becomes
36.237 -> And what you can do here
38.457 -> you can also make it a shell
40.456 -> so that too, I will tell you here today
41.999 -> but here I will come live first
44.701 -> so that this page opens live
46.87 -> I close it
48.008 -> and here I write CSS Grid only
54.497 -> and here I will make a container
58.998 -> And here I'll make a box
60.671 -> inside which I'll put the item -$
65.54 -> and I'll make it How many, will I make 8?
69.563 -> make 8
70.75 -> This I made 8, ok
71.726 -> so, 8 items come here
73.153 -> and here because I have given it a class of the item,
76.459 -> so, what will I do here
77.355 -> I will write the .item
78.433 -> And what will I do inside the .item
80.299 -> first of all, I will give the border
82.168 -> How much should i give
82.668 -> 2px solid black, should be good, ok
87.5 -> After this, what will I do here
88.839 -> I will give it a background
90.832 -> I will give it in background-color, is purple.
93.246 -> And this should be enough
95.403 -> but it is more important than
96.754 -> what should I do with the container that is
101.838 -> I do it its display: gird
105.283 -> And that should be good
107.257 -> That's all for now, okay
108.962 -> so, it didn't come
110.084 -> let's see why it didn't come
111.215 -> I've given the box in class, okay
114.709 -> box item, it is the same thing
116.708 -> Here I have done this, so look it looks like this too
119.185 -> now what will I do here
120.421 -> I will make it a grid, okay
122.822 -> So what shall I do here?
124.183 -> I'll write grid-template-columns
126.09 -> and here I'll write 1fr 3fr 3fr, ok
132.721 -> and what to do with that
134.478 -> I will also write its grid-template-rows
137.725 -> and I repeat 1fr 4 times
142.771 -> I think that should be enough
144.05 -> And now I will come here with this
145.498 -> so, it looks like this
146.306 -> I have not set the grid-gap
148.138 -> now here I told you about the grid-gap
150.686 -> I told you about the grid-gap here
152.657 -> now I want to tell you
154.054 -> that you can set 2 types of grid-gap separately.
157.15 -> one is grid-column-gap, suppose i give 2rem
161.498 -> and which is the grid-row-gap
165.649 -> that i want to give it 1rem for some reason
168.932 -> So, look here this gap is more visible
170.947 -> and this gap has reduced
172.135 -> I increase it a little more so that it looks different
174.932 -> I do it 7rem
176.331 -> So, look at this, the column-gap here
178.228 -> seems to be a little enlarged
179.839 -> but the row-gap is showing less, right
182.739 -> So here it is not visible in purple, this black color
185.151 -> so do one thing
186.268 -> lightens the purple a little
188.329 -> yes, now a little bit is ok
189.409 -> Yes, the items are now visible to me
191.196 -> so here a basic grid has been made in this way
193.494 -> so, I will do one thing, comment it out
196.305 -> Like I wrote here to tell you
198.761 -> that you can set common-gap and row-gap
205.08 -> I keep this 1rem which is my grid-gap
207.831 -> 1rem is enough
209.776 -> and at the same time increase the number of columns here
212.497 -> so, I do one thing by not doing this
214.312 -> I repeat this too
217.023 -> I repeat 5 times
219.506 -> or i do it 1fr
220.919 -> That is, 5 comes with an equality, ok
225.327 -> so now what we will do here
226.561 -> let's see how I add more items inside it
230.012 -> So here I add a few more items
232.931 -> Good
234.278 -> I have added so many items here
235.898 -> now i want this which is my shell
238.009 -> Now one thing
238.665 -> I do is increase the padding of the box a bit
241.622 -> so that it looks bigger to you
243.766 -> giving the padding 23 pixels
245.541 -> And what is now looks a little bigger to you
247.617 -> so, I want to say that this is the 4 shells, 1, 2, 3, 4
251.65 -> i.e., item 1, item 2, item 6 and item 7
254.955 -> Let it all be one, well, for some reason I want it
258.457 -> and the rest should remain as it is
260.349 -> So, what can I do over here
261.551 -> I can use a property to make them one
264.741 -> which is it
267.577 -> if I am my child here, whoever is my child
271.121 -> Suppose I am targeting the first child of my box
276.6 -> so, I will use the first child selector
278.893 -> and I will be able to select the first child
282.411 -> Now if I do grid-column-start here
285.441 -> I make it 1
287.142 -> and I also do grid-column-end 3, ok
291.402 -> Then I'll show you what will happen
293.203 -> so, look it has span 2 columns
296.282 -> now you will say that there was 3 here so why did 2
298.642 -> I'll tell you why
299.846 -> see what was the start? 1
301.521 -> end was 3
302.458 -> so, what will it do, look at the line it is
304.364 -> 1,
305.312 -> 2,
306.082 -> 3
306.582 -> So, it started on line number 1,
308.333 -> ended on line number 3
309.932 -> so, you can do it like this also
312.233 -> At the same time, you do the same thing with the row
314.981 -> what will happen if you do the same thing with the row
317.556 -> here you just have to row instead of the column
322.265 -> So, what will it do here
323.736 -> it will do it span
324.5 -> so, I have done what I said
326.793 -> so, you can make very nice layouts like this
330.217 -> And this is going to be very useful
332.247 -> if you are designing a website in which you want a sidebar.
335.918 -> Or do you want
336.914 -> that your content should come in one side
338.78 -> there should be space in the middle
339.701 -> content should come in the sides
341.227 -> You can do all those things with the help of this
343.248 -> then you must have understood
345.996 -> and here I will also tell you a shortcut to it.
349.455 -> And you do not need to write it separately
351.512 -> you can also write a shortcut to it
352.816 -> and what is the shortcut
354.867 -> You can write the shortcut like this
356.178 -> you write grid-column
357.487 -> just grid-column
359.713 -> and after writing grid-column you write 1 and say do span 3
364.209 -> So, what will happen if I do this
366.345 -> here it has span 3 boxes
368.523 -> so here I wrote 1
371.043 -> and I said that span 3 boxes
373.187 -> So, look over here, 1, 2 and 3
374.555 -> It has span 3 boxes here
375.842 -> so, understand the syntax
378.845 -> yes, row
380.161 -> I saved it
382.435 -> And what happened here
383.67 -> it spans 3 boxes
385.072 -> so, this is what we can do with ease
387.608 -> if we are using it our CSS grid
391.574 -> Now a very big question arises here
393.216 -> that what should be used
394.839 -> whether to use flexbox,
396.383 -> use grid
397.92 -> or use floats
400.199 -> Or else none of these should be used
402.141 -> should be set up with the using br, br whole website
404.761 -> then do not set the whole website with using br, br
406.719 -> It is obviously wrong, you must have also come to know
409.368 -> But right now, here I want to tell you
411.997 -> that there is flexbox,
413.273 -> grid and float work, which is not a difference in that, ok
417.969 -> You can do whatever feels comfortable
420.016 -> your development should be easy,
422.091 -> your website should look good
424.294 -> and your website should be responsive
426.499 -> As long as all these conditions are being satisfied,
428.111 -> your user who is coming on the website is happy
430.281 -> you are always happy, it is always your habit
432.557 -> And at the same time, the server that is hosting your website
436.027 -> that is, your loading speed, etc., is also very good
438.602 -> That is, your server provider is also happy with you
441.867 -> as long as everyone is happy, there is no problem, it is fine.
444.312 -> But if your user experience is getting hampered
446.7 -> that is, your user is complaining
448.73 -> saying that this website runs slow
451.211 -> Or he is having a problem with the layout
453.095 -> or the website is not running well in his tablet
455.676 -> there is a problem.
456.529 -> So, use whatever you feel is right there
459.063 -> user experience has to be number 1
461.172 -> The biggest thing in SEO is user experience
463.496 -> always remember that
465.085 -> And very few people will probably tell you this thing
467.796 -> because people sell many things in the name of SEO
470.326 -> Here I want to tell you that SEO means
472.286 -> that the user is happy,
473.845 -> so, your website has to be placed up on the Google.
476.485 -> You must have seen many websites
477.823 -> they come up on Google
478.67 -> but their design is also not that good,
480.469 -> and you can search and see
482.555 -> You can see by searching any term
484.418 -> and it is not a good design at all
486.212 -> it is an old website
487.403 -> And at all means it does not look good
490.905 -> but even after that it is up
492.467 -> sometimes the loading time is also less
494.417 -> But it is talking about the relevant topic
496.998 -> It has information in the page
498.777 -> so those things matter more.
500.503 -> And if the website is not responsive in that phone
502.728 -> then maybe if you search on the phone
503.853 -> then it will not show
504.779 -> Because why will Google show what you can't see
507.572 -> so that's why if you look from the point of view of SEO
511.167 -> then you can use CSS
512.613 -> And if someone tells you that should use flexbox
514.626 -> don't use gri
515.45 -> It is not SEO
516.788 -> or use grid, don't use float
520.714 -> So, if someone is saying such a thing which has no logic
523.446 -> then definitely you should avoid all these things.
526.157 -> Here the logic is important
527.433 -> and how are you able to do your items on the website
531.165 -> which you have made the design of your website in the paper
534.168 -> Or if you work for a company
536.649 -> that gives you Photoshop templates
539.129 -> And with the help of Photoshop templates,
540.803 -> you create a complete website.
543.147 -> So, if you want to do that
544.673 -> then what you can definitely do
547.099 -> you can achieve it by using anything.
551.709 -> If done with grid then do with grid,
553.147 -> if done with float then do with float,
554.068 -> if done with flexbox then do with flexbox
556.098 -> If it is happening to something else, then do it too
557.647 -> Go, I tell you this too
559.174 -> but these things are ideal
561.254 -> Your website will be maintainable,
563.07 -> it will be easy to make responsive
565.032 -> all those things come
565.883 -> then you must have understood what this grid is
568.351 -> We'll see a little more about grids in the coming videos
570.751 -> and then we'll look at JavaScript very quickly after that
573.301 -> and move on to this course
574.554 -> And if you haven't accessed this playlist yet
576.646 -> then kindly access it by clicking here above
579.362 -> And at the same time save this playlist by clicking here
582.87 -> Because this is the place
583.624 -> where I will be going to put all those videos
585.628 -> so, if you haven't liked this video, So kindly
587.808 -> I am getting very few likes right now
589.402 -> I just want you to give me positive feedback
592.003 -> And how can you give positive feedback
593.759 -> by liking and commenting
595.374 -> so many people also comment
597.214 -> And I also read all the comments
598.527 -> I also like it very much
599.611 -> so many comments come from your side.
601.542 -> And you also like the videos
603.334 -> so that I know that you are really enjoying this course
606.128 -> And what I have worked hard on this course
608.003 -> is definitely teaching you something or the other
610.388 -> So please like the video
612.564 -> don't forget it takes 1 minute
614.272 -> And that's all in this video for now
615.824 -> I am giving the source code in the description.
618.333 -> And I will update the source code soon
621.032 -> after uploading the video
622.896 -> so, hope you are getting the source code too
625.991 -> Thankyou so much guys for watching this video
628.003 -> And i will see you next time.
Source: https://www.youtube.com/watch?v=5II60I5gpKY