- 1 year ago
- #cssgridlayout
- #cssgridlayoutgenerator
- #cssgridlayoutinonevideo
- #cssgridlayouttutorial
- #cssgridlayoutresponsive
- #cssgridlayoutmodule
- #cssgridlayoutexamples
- #cssgridlayoutcrashcourse
- #cssgridlayoutintamil
- #cssgridlayoutwebsite
- #cssgridlayoutinflexbox
- #cssgridlayoutinhindi
- #cssgridlayoutintelugu
- #cssgridlayoutand
- #cssgridlayouttamil
In this tutorial i will show you what is css grid layout system? How we can use it to adjust positions and other layout formats in our website easily.
#cssgridlayout #cssgridlayoutgenerator #cssgridlayoutinonevideo #cssgridlayouttutorial #cssgridlayoutresponsive #cssgridlayoutmodule #cssgridlayoutexamples #cssgridlayoutcrashcourse #cssgridlayoutwithimagespan #cssgridlayoutintamil #cssgridlayoutwebsite #cssgridlayoutinflexbox #cssgridlayoutinhindi #cssgridlayoutintelugu #cssgridlayoutejemplopracticodesitioweb #cssgridlayoutand #cssgridlayouttamil #cssgridsystem #cssgridtemplateareas #cssgridtemplaterows
#cssgridlayout #cssgridlayoutgenerator #cssgridlayoutinonevideo #cssgridlayouttutorial #cssgridlayoutresponsive #cssgridlayoutmodule #cssgridlayoutexamples #cssgridlayoutcrashcourse #cssgridlayoutwithimagespan #cssgridlayoutintamil #cssgridlayoutwebsite #cssgridlayoutinflexbox #cssgridlayoutinhindi #cssgridlayoutintelugu #cssgridlayoutejemplopracticodesitioweb #cssgridlayoutand #cssgridlayouttamil #cssgridsystem #cssgridtemplateareas #cssgridtemplaterows
Category
📚
LearningTranscript
00:00So today we will look at Grid Layout System in this topic.
00:05As we saw in our last lectures, Flexbox which is used for responsiveness in our website.
00:14If we are in big screen, how to show things, how to align things, how to set their display properties.
00:21So we can use all this through Flexbox.
00:25Flexbox and Grid system are very similar.
00:30So today we will look at Grid Layout System.
00:34With the introduction of these two systems, it has become very easy for us.
00:38Like we don't need to manually position things and set their alignment.
00:44By using these two systems, we can easily adjust our screens.
00:50With mobile device, tablet, laptop or big screen.
00:55So let's understand what is Grid Layout actually.
01:00First of all, we make a container.
01:05And inside it, we make a line disk.
01:13And we give a class to all of them.
01:18With the name of item.
01:26So we have all the items.
01:30Now let's style it a little.
01:35If we refresh, we have a demo text.
01:45Let's align the text to the center.
01:49And we will adjust it through our grid layout.
01:56Like we have different sections in our website.
02:01There are different categories.
02:03We will align it in that way.
02:06So that through a demo, we can implement it in a real-life project.
02:14So let's take the container.
02:19The container is its parent element.
02:22The container is its parent element.
02:25And all the items are its child.
02:29So whenever the display property is applied, it is applied inside the parent element.
02:36So we call it displayGridProperty.
02:45It has a default behavior.
02:50Column.
02:52We saw Flexbox.
02:54It brought inline.
02:56It has a default behavior.
02:58And it has a default column.
03:01So let's see it first.
03:06All right.
03:13Columns.
03:15If we want to bring it in columns, how can we do it?
03:19There is a way to do it.
03:24It is auto.
03:26We can use auto.
03:28One fraction means one equal space.
03:32One equal space for everyone.
03:34For example, we have nine items.
03:38So let's bring all three in three columns with equal space.
03:45So first of all, let's see a general process.
03:49Generally, how do we use things?
03:511fr, 1fr.
03:53This will make three columns.
03:56Like this.
03:58If we add one more 1fr,
04:01it will make four columns.
04:04Four columns.
04:061, 2, 3, 4, 8, 9.
04:089 was additional.
04:10Now it is below.
04:12After this,
04:14we can use the gap property that we saw in Flexbox.
04:22It is rowGap.
04:24It will give us a gap in rows.
04:28For example, if we take 10px as rowGap,
04:32it will give us a gap in rows.
04:35If we take columnGap,
04:41it will give us a gap in columns.
04:45Like this.
04:48So we have a gap.
04:50Now after that,
04:52we have 1fr, 1fr,
04:55which will equally distribute everyone in four rows.
04:59In addition to that, we can also use auto.
05:04Auto will also perform the same functionality.
05:08If we use another auto,
05:10we will have a specified behavior.
05:14This will be the general alignment of these things.
05:20After that,
05:22if we have a lot of items and we want to align them,
05:29there is an easy way to do it.
05:32We will use the repeat function.
05:34We will tell it how many columns we have to divide.
05:40Let's suppose we have to divide it into five columns.
05:44We will tell it to have one fraction.
05:48Everyone has to have the same alignment.
05:51Everyone has to adjust in the same way.
05:54We can also do it this way.
05:57If we take three columns and make three rows,
06:01it will give us exactly the same behavior.
06:06Okay.
06:08So this is what we have.
06:11Display.
06:13Create template columns.
06:16Okay.
06:17In the same way, we have one.
06:20Let's run it.
06:23Like this.
06:26Let's give it a border.
06:29Let's understand a concept first.
06:32Let's give a border of 5 pixels.
06:36Or let's give it a background instead of a border.
06:45Let's give it a light color.
06:50We have given it a light color.
06:53It doesn't look good at all.
06:56So let's change it.
06:59Like this.
07:02Let's give it a border.
07:063 pixels.
07:08Light color.
07:10So that we can easily understand the differences in things.
07:14Let's add some padding to it.
07:193 pixels.
07:30Now we have something like this.
07:35So.
07:37We had to understand a concept.
07:41So this is what you are seeing now.
07:45Line 1.
07:47For example, we have column 1.
07:50This is column 2.
07:52Column 3.
07:53Column 4.
07:55Similarly, this is row 1.
07:57This is row 2.
07:59And this is row 3.
08:01In this way, the first line will be our column line 1.
08:07And this is column line 2.
08:09This is from here to here.
08:11Column line 2.
08:13And this is from here to here.
08:14Column line 3.
08:15Line 4.
08:16And line 5.
08:18Similarly, the upper line is row line 1.
08:21Row line 2.
08:22Row line 3.
08:23And row line 4.
08:27When we move on to these things, we will have a better understanding.
08:32How to use rows, columns, row lines, and row columns.
08:38And their important role in aligning things.
08:44So let's understand.
08:46Next.
08:48Justify content center.
08:50Align item center.
08:52We can see anything.
08:54Center.
08:56Justify content.
08:59Row wise.
09:01After that.
09:03Let's see.
09:05Space between.
09:07All items.
09:10Space around.
09:13All items in space.
09:17This is justify content.
09:19Align items.
09:21In row.
09:23Center.
09:25Space between.
09:27Space around.
09:29We can use these things in this way.
09:32After that.
09:34Let's see.
09:38As we have used repeat function.
09:42We can give different values instead.
09:46For example.
09:49I want the first row.
09:53Get width.
09:56200px.
09:58The second row is 100px.
10:02The third is 150px.
10:04And the last is 60px.
10:07Let's see the result.
10:11In this way.
10:15Show results.
10:19In all rows.
10:23400px.
10:26500px.
10:29320px.
10:31For example.
10:33260px.
10:37You can see.
10:41This way.
10:43Alignment changed.
10:46In this way.
10:50Repeat.
10:54Fixed width.
10:58So that.
11:00Things work properly.
11:04After that.
11:07Let's see the next concept.
11:12Let's do some modification.
11:16Let's add classes.
11:20For example.
11:22Item.
11:26In the name of item.
11:30In the name of item.
11:34In the name of item.
11:38In the name of item.
11:42In the name of item.
11:46In the name of item.
11:50In the name of item.
11:54In the name of item.
11:58In the name of item.
12:02In the name of item.
12:06In the name of item.
12:10In the name of item.
12:13In the name of item.
12:17In the name of item.
12:21In the name of item.
12:25In the name of item.
12:29In the name of item.
12:33In the name of item.
12:37In the name of item.
12:41In the name of item.
12:45In the name of item.
12:49In the name of item.
12:53In the name of item.
12:57In the name of item.
13:01In the name of item.
13:05In the name of item.
13:08In the name of item.
13:12In the name of item.
13:16In the name of item.
13:20In the name of item.
13:24In the name of item.
13:28In the name of item.
13:32In the name of item.
13:36In the name of item.
13:40In the name of item.
13:44In the name of item.
13:48In the name of item.
13:52In the name of item.
13:56In the name of item.
14:00In the name of item.
14:03this is the shortened property of the grid column
14:08now in the same way
14:11let it be 4
14:13in the same way
14:15we take the grid column
14:17grid row
14:19grid row
14:23start
14:25this will start from row 1
14:28row line number 1
14:30this is 1, 2, 3, 4
14:34so I want to cover the whole row
14:38so what I will do for this
14:41grid row start 1
14:43grid row end 4
14:501, 2, 3, 4
14:53let's refresh it
14:55so now you can see
14:57it has changed like this
15:04in this way with the help of grid
15:07we can change it
15:08and the shortened property of this is
15:11which is
15:13grid row
15:191 by 4
15:26ok
15:27now one more thing we understand
15:29that
15:30for example
15:32this is a grid line
15:34and if we want to work through columns
15:39now we are working through lines
15:41so we want to work through columns
15:44so let's remove these two properties
15:48values
15:51so by default we have it
15:56now I want to
15:58work through columns
16:00not by column lines
16:02or row lines
16:04so how we will work through columns
16:06it will start from 1
16:08and it will span till 4th column
16:121st column, 2nd, 3rd and 4th
16:15it will span all these columns
16:18it will span all these columns
16:20and 1 will come on top of it
16:22so
16:231st column start
16:25where will the column start from
16:27and where will the column end
16:29it will span till the end
16:31so let's refresh it
16:33so now you can see
16:35it has taken all the columns
16:39and in the same way
16:41if we give it
16:45span
16:46so now I have 3 columns
16:48so I give all 3 columns
17:05let's change it
17:07so now you can see
17:09I have 3 rows
17:11so because of this
17:13because of this
17:15we keep rows and columns
17:17because other items
17:19need some space
17:21because they can't go out of the container
17:23that's why
17:25as soon as they are inside the container
17:27we have to give them some space
17:29so
17:31in this way we can use
17:33columns and rows
17:35apart from this
17:37next
17:39topic
17:41grid area
17:43for example
17:45I have
17:47an area
17:49I define it here
17:51grid area
17:53let's suppose
17:55we want to make
17:57a physical pattern
17:59of header, main footer
18:01so
18:03let's use it
18:05I give it
18:07header
18:09this is my header
18:11and
18:13I keep classes up to 7
18:15ok
18:17so
18:19item 1 is done
18:21header
18:23let's
18:25drag it
18:31in the same way
18:33I change
18:35other items
18:37header
18:39I have
18:415 classes
18:43in item 2
18:45and
18:47let's put
18:49footer
18:53let's change
18:55classes name
18:57and
18:59item 5
19:03ok
19:05done
19:07let's change
19:09naming
19:11header
19:13menu
19:19main
19:31footer
19:33in general
19:35we want
19:37a website
19:39for example
19:41refresh
19:45a website
19:47has a header
19:49menu
19:51main section
19:53in it
19:55main section
19:57right section
19:59and footer
20:01so
20:03we want to make it
20:05so we can
20:07make it in grid layout system
20:09there are many ways
20:11so let's use them
20:15let's finish
20:17we don't need it
20:19so I use
20:21grid template
20:23areas
20:25in it
20:27I define my areas
20:29like
20:31how many places
20:33and how many places
20:35not
20:37so
20:39I use
20:41single quotes
20:43and
20:45how many places
20:47and columns
20:49I define in it
20:59so
21:01we
21:03completed
21:05our structure
21:07let's check it
21:09result is
21:11according to our expectation
21:13we can use
21:15grid structure
21:17to design
21:19layout
21:21and
21:23utilize it in our web
21:25and
21:27add functionalities
21:29so this was our topic
21:31grid layout system
21:33we will use it in practical projects
21:35so
21:37we will understand
21:39how to utilize it
21:41to
21:43adjust
21:45web flow
21:47and
21:49display settings
21:51which is
21:53easy and
21:55useful
21:57and
21:59meaningful
22:01see you in
22:03next video
22:05Allah Hafiz
Recommended
8:03
|
Up next
2:35
15:12
8:27
11:08
7:21
15:24
0:15
0:11
0:10
0:04
0:12
0:07
0:07
Be the first to comment