Up next in 10
How To Create A CSS Grid _ Build Responsive Website With CSS Grid Layout
247 views
Feb 8, 2024
The video "How to Create a CSS Grid: Build Responsive Website with CSS Grid Layout" is a tutorial aimed at teaching viewers how to utilize CSS Grid to build responsive websites. Throughout the tutorial, step-by-step instructions are provided on how to implement CSS Grid to create a flexible and dynamic layout structure. Viewers are guided through essential concepts such as defining grid containers, laying out grid items, and implementing responsive design techniques using CSS Grid properties. By following along with the demonstrations and explanations presented in the video, viewers can learn how to leverage CSS Grid to create modern and adaptive layouts that automatically adjust to different screen sizes and devices. Whether for personal projects, portfolios, or business websites, this tutorial offers practical insights into using CSS Grid to build responsive and visually appealing web designs.
View Video Transcript
0:00
Hi guys, welcome back to my new video and today in this video we will learn about the
0:04
greet layout in CSS. Here I have this folder. In this folder I have index.html file
0:11
and style.c.s file. Let me open these files with text editor. So this is the HTML file. I have
0:17
added basic HTML structures and this one is the CSS file. I have added margin padding and
0:22
font specific. I have connected HTML file with CSS with this line of code. Link, rel, Style
0:29
and the file name. Next let's come to the body tag and here first we will create one div and let's add the
0:36
class name hero. Here let me add one more div and I will add the class name box 1 and in this div we will
0:47
add one text so I'm using H1 tag and the text is item 1
0:53
Now we will duplicate this one. I will duplicate it and I will change the class name box
0:59
2, 3, 4, and the title also item 2, 3 and 4
1:06
After adding this, open this HTML file with web browser, you can see these text on the
1:10
web page. Now just come back and we will come to the CSS file
1:19
And here we will add the class name box 1. For this dip we will add the background
1:24
This is the color code. Now duplicate this one and change the class name box to add different
1:29
color. Similarly we will add different color for all four divs. This is box 3 and another
1:40
color code and now we will write box 4 and here also we will add different
1:47
background color. After adding this just copy the class name hero write it
1:56
here and here we will add div. For all this day we will add the padding 100 pixels
2:09
And let's add the title here, H1. For this one we will write the color white
2:18
Here you can see it is coming like this. Right now it is too big so we have to reduce the padding
2:24
So let me come back and I will change it to 30 pixels
2:29
Now it is looking like this. Next we will see the grid properties so let's come back and copy the class name Hero
2:42
For this one we will add display grid and after that I will write grid template rows
2:53
Auto 4 times. After adding this again refresh the website and you can see there's no changes here
2:59
I will change it to 200 pixel. And after that you can see it is coming like this
3:12
It will use the 200 pixel height. Let's come back and I will change it to 150 pixel
3:20
And the last one also 150 and for this one I will write 250
3:26
So you can see it is coming in the same order. First 2 div is 150 pixel and the last one is 150 and the third one is 250 pixel
3:34
Now just come back and instead of this rows I'll write columns
3:38
Great template columns and let's add auto here for 4 times. So the 4 div will come in the one single row
3:51
So it is coming like this, there is 4 different columns. If I change the screen size you can see it is responsive
3:58
Now just come back and if I will change it to a value I write like this And again refresh the website you can see It is fixed size and the rest of space is blank Let come back and I will again change it
4:21
And again I will refresh the website you can see first and second div is 200 and the last
4:26
one is 200 and the third item is 250 pixel but rest space is empty right now so just
4:32
come back and in the last one I will write one fraction fr
4:37
After writing this, you can see the last div is using the entire available space
4:47
Now just come back I will add auto, so it will also do the same thing
4:56
You can see there is no changes. So let's come back, I will again change it as one fraction and in the third one I will write
5:03
two fraction. After making these changes, just come back and you can see the first and second item is 200 pixel and the rest of the space is divided in 3 parts and the item 4 is using 1 part and item 3 is using 2 part
5:20
You can see these items are responsive but the first 2 is fixed for 200 pixel
5:27
Now let's come back and here I will write repeat and I will write 4 so it will create 4 columns and I will write the auto
5:36
the auto. So the column width will be auto. If I refresh the page you can see equal
5:44
width for all the columns. Now let's come back and if I will change it to 200
5:49
pixel you can see all the columns width is 200 pixel and four columns are
5:54
coming in one row because we have added 4. Let's change it as 3 and after that you
6:04
you can see three columns in one row and the other div is going into second row
6:11
Let's come back and change it to 4 and here we will write Minmax
6:16
In this Minx I'll write the minimum value, 300 pixel and the maximum it will be one fraction
6:24
like this. Now again I will refresh the website you can see
6:31
It will use the entire space but if I will reduce the size. it will not go less than 300 pixel
6:38
If I change it to 200 pixel and if I again refresh the website and change the screen size
6:44
you can see it will not go less than 200 pixel. So we have to make it flexible so let's come back and instead of this Ford I will write
6:56
auto fit. If I write like this and refresh the website you can see it will go up to the
7:04
200 pixels, after that it will shift the column in the next row
7:12
So you can see it is perfectly responsive right now. Using this grid we can create a responsive layout easily
7:22
So let's come back to the HTML file. I will duplicate all these boxes
7:28
I will change the item name 5, 6, 7 and 8. I will change the class name also
7:35
So I will change the class name like box 5, 6, 7, 8
7:42
So we have total 8 small boxes here. Now let's come back to the CSS and here we will add 1 comma and box 5
7:54
So the box 1 and 5 color will be same. Now here we will add box 6, here box 7
8:02
And here we will write box 8. So this is how we have added color in all the new boxes
8:11
You can see total 8 items on this webpage. And if I change the screen size you can see it is changing the layout like this Let come back and here we will remove this one and I will write auto
8:30
I will write it four times. So only four columns will be in one row
8:37
You can see it is like this. Next we will add a space between these columns so let's come back and here we will add grid gap
8:47
write the value. So I will write 10 pixels. Now you can see 10 pixel of a space between these columns
8:59
And it is responsive. Now let's come back and I will copy this class name Box 1
9:06
I'll write the first class name here. And for this one we will write grid area
9:14
So in this grid area we will add 4 values. So first let me add the value then I will tell you what it is
9:22
So I will write 2 slash 1 slash and here I will write span 2 and span 3
9:31
So in the grid area we write the starting position of the row then the starting position of the column
9:40
then we will write the end of row and end of column
9:45
You can see I am writing here, I will write it as comment, row start, column start, row end and column end
9:54
So these are the 4 values in grid area. So if I refresh the website you can see we have added this grid area in the item 1 and item
10:04
1 is starting from the second row and first column and it ends at 2 row and 3 column
10:14
we have written in the CSS. Let's come back and we will change the value and we will see the another example
10:23
So I will write the different value here. Here we will add 1
10:33
So the row start will be 1. Here I will add 2 so the column start will be 2
10:39
Span 2. It means the end column will be 2 and end row
10:44
row will be 2. Refresh the website and you can see the item 1 is starting from the second column
10:50
and first row and end point is 2 column and 2 row. So this is the grid area. So let me remove this one
11:03
I will remove it from here also and let me remove this grid template. First head I will write
11:10
grid auto columns 200 pixels. If I write like this and refresh the website you can see, the each column width is 200 pixel
11:22
and it is coming vertically. Now instead of this columns I'll write rows
11:34
this and now I will refresh the website. You can see the column width is 100% and the height is 200 pixel and it is coming vertically
11:49
Now just come back and here I will write grid auto flow
11:56
If you will write the grid auto flow row, so you will see all the dips vertically
12:03
And if I will write grid autoflow column, then you will see all the divs horizontally
12:17
Now let's come back and here I will write grid area and I will add one name for this
12:25
grid area. That's it. Now let come back to the main class name which is hero and here we will write grid template areas In this grid template areas we will use this name So just copy this one add it here You can see we are writing it in the single code
12:47
If I write like this you can see the first item is using two grid because we have added the
12:53
grade area name in the box one and in the template we are adding grade area two times
13:01
That's why it is using two space. Now if I will add one more dot here, you can see item 1 is using 2 space and after that we
13:15
have 3 items because we have added 3 dots. Now let's come back and I will write some more examples here
13:23
So I'll write dot over here, remove this dot from the end
13:30
Now you can see the item is starting at second position and its width is around two items
13:39
Now just come back and I will write it in the other line also
13:48
And we will add one more class name. Here we will write the box 2
13:57
For this box 2 also we will add one grid area and we will add different name for this
14:03
grid area. So let me add the grid area name My Area 2
14:09
And in this template we will add My Area 2. I will add it two times
14:16
Let me add one more dot. If I refresh the website you can see item 1 is in the first row and it is using the first row and it is
14:27
two items place and in the second row at the end you can see the item 2 and it is also
14:33
using the two item space because we have added these items name two times in the row
14:40
let me remove these things and I will tell you some easy properties of grid so let's come back
14:45
to the HTML file I will remove other div we have only one you can see item 1 on this
14:55
web page let's come back to the CSS file Let's remove the CSS
15:04
And here we have only box 1. In this box 1 first we will add the background
15:12
So I will add this background color code. Then let's add one height and width for this div
15:21
And we will add margin auto and color white. So the text will be in the white color color
15:27
You can see this text at the corner. So we have to move this text in the center so just come back and here in this box one we will
15:39
add display grid. After adding display grid we can add align items center
15:47
When we will add align items center it will align the content vertically center
15:53
You can see this title is vertically center. Next we have to make this text in the center horizontally
16:01
So just come back and here we will write Justify item center
16:08
After adding this you can see this item is in the center
16:12
Now instead of adding this two line we can write it in the one line also
16:17
So let me comment it and here we will write place items
16:22
If you will write this place items center, you will find the color
16:26
content in the center of the div. You can see it is still in the center
16:34
So this was all about the grid layout. I hope this video will be helpful for you
16:38
If you have any question you can ask me in the comment section and please like and share this video and also subscribe my channel EG Tutorials to watch more videos like this one
16:47
Thank you so much for watching this video