A simple way to make a Responsive CSS Grid.
Hello everyone..! Hope you all doing fine. So today I came up with a very interesting as well as an easy method to create a responsive CSS grid. This is an easy method that you could use to create a template for your web interface. I will go through the topic step-by-step, to create this grid.
First, select any text editor you are comfortable with. I recommend either visual studio codes or sublime text. Then make a separate folder to keep your HTML and CSS files. This will make it easy for you when linking CSS with HTML.
What is responsive web design?
A responsive web design makes your website look good on any device. In fact, it adapts to the dimension of the device you use to view it. So let’s start with basic Html.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="blog.css">
</head>
<body></body>
</html>
If you are new to HTML and CSS, no worries. Let me start from the very basics.<!DOCTYPE HTML> is actually not a HTML tag. This informs your web browser of what type of file to expect.<html></html> tag is the container of all other Html elements. All the other tags and codes will be inside this tag.<head></head>tag contains metadata. Metadata is data about data. The content inside the head tag won't appear on the web page. This tag is placed between the HTML tag and the body tag.<body></body> tag contains all the content of the document.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The “viewport” is the user’s visible area on the web page. Html5 has introduced this method for web designers to take control over the viewport through <meta> tag.
The width=device-width part sets the width of the page to follow the screen-width of the device. The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. 1.0 indicates that does not zoom. Let me discuss more on this in the latter part.
Making the CSS grid
Using <link rel=” stylesheet” type=” text/CSS” href=”blog.css”> code, I have linked my CSS style sheet to an Html document.<link> the tag shows the relationship between the current document and the external document. herf specify the location of that particular external document.
Sometimes the browser will apply its default margin/padding to our layout. If you don’t want that to happen, you can define your margin and padding as zero in your CSS.
*{
margin: 0;
padding: 0;
}So, the next thing I'm going to do makes a class of <div> called a “container” inside the <body> tag. What is this <div>?. This tag normally uses to define a division or a section of the HTML document.All the things that are visible on the screen will be placed here. Under that, I'm going to create few classes inside <div> tags, where we going to place the components of our layout.
<body>
<div class="container">
<div class="navBar">navigation Bar</div>
<div class="main"> main section</div>
<div class="sideBar"> side bar</div>
<div class="item-a">a</div>
<div class="item-b">b</div>
<div class="item-c">c</div>
<div class="footer">footer</div>
</div>
</body>The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. height:100vh; is used to expand the layout in the full-screen height. The grid-template-columns property used to specify the number of columns and width of the columns in the layout.grid-template-columns: repeat(4,1fr); this divides the screen into 4 equal columns.
.container{
display:grid;
height:100vh;
grid-template-columns: repeat(4,1fr);
grid-template-rows: .2fr 1.5fr 1.2fr .8fr;
}Next, I'm going to divide this into rows. Using this code grid-template-rows: .2fr 1.5fr 1.2fr .8fr; you can divide it into any number of rows in any size as your preferences. To show this clearly let me add background colors.
.navBar{
background: #f5cd79;
}
.main{
background:#63cdda;
}
.sideBar{
background:#f8a5c2;
}
.item-a{
background:#ea8685;
}
.item-b{
background:#786fa6;
}
.item-c{
background:#cf6a87;
}
.footer{
background:#596275;
}The grid-template-areas the property specifies areas within the grid layout. Now I'm going to specify where each and every element should place on my temple. I’ll add the following code part inside my previous “ container” in the CSS file. For the time been, I gave a grid-gap 0.8rem for more clarity.
grid-template-areas:
"navBar navBar navBar navBar"
"sideBar main main main"
"sideBar item-a item-b item-c"
"sideBar footer footer footer";
grid-gap:0.8rem;
Now you can see the grid-gap, but you cannot still see the elements in the correct places as you want. for this, you have to define grid-area in all the classes you define above in your CSS file.grid-area property specifies the grid items' location in the grid layout.
.navBar{
background: #f5cd79;
grid-area:navBar ;
}
.main{
background:#63cdda;
grid-area:main ;
}
.sideBar{
background:#f8a5c2;
grid-area:sideBar ;
}
.item-a{
background:#ea8685;
grid-area:item-a ;
}
.item-b{
background:#786fa6;
grid-area:item-b ;
}
.item-c{
background:#cf6a87;
grid-area:item-c ;
}
.footer{
background:#596275;
grid-area:footer ;
}
This is the final view of our template. Now you can check by changing the size of your window, you will see that the only width of the containers change but the position stays the same.
Making the grid Responsive.
Let’s see how to fix the mobile view of that website. Now I’m going to add code @media only screen and (max-width: 600px).The @media rule is used in media queries to apply different styles for different media types/devices.
Now I’m going to set the mobile view. I’m going to take all these sections into one beneath another. previously we only had 4 rows now you can see that this view increases the number of rows.
Next, I’m adding one single column using the code grid-template-columns: 1fr; to the mobile view and then specify the sizes of the rows. just play around with numbers and see what fits best to your web layout.
@media only screen and (max-width: 550px){
.container{
grid-template-columns: 1fr;
grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr;
}
}I hope you can remember we define the grid-template area in the previous view to specify the places. Now let’s define the places for this mobile view too.
grid-template-areas:
"navBar"
"sideBar"
"main"
"item-a"
"item-b"
"item-c"
"footer"Add this code part inside the media quarry file. Now you will be able to see the mobile view as follows.
So that’s the very basic way of making a web layout.
Adding multimedia components to the grid.
Now let’s play around with this layout and see how to add various multimedia components to this. Let me show you the way to add an image to this sidebar.
.sideBar{
grid-area: sideBar ;
background: url(flower.jpg) center/cover no-repeat;
max-width: 100%;
max-height: 100%;
display: block;
}First, you have to add the image that you want to display on the web to the relevant folder. Then using the above code you can add the image to the relevant block. We use max-width: 100%;max-height: 100%; We use 100% here, it defines the maximum width in percent of the containing block. Just change the percentages and see how you can change the size of the image within the containing block.
Next, we’ll try to add some text to these blocks and style them. I’ll add some text inside class “main” and style it. I’ll add a heading inside <h1> tag and give the class name as “topic” and add some text inside <p> tag and give the class name as “para_1”. Add styling codes inside CSS document.
.topic{
color: #130f40;
font-style: italic;
font-size: 100px;
letter-spacing: 4px;
}
.para_1{
font-family: "Lucida Console", "Courier New", monospace;
font-size: 20px;
font-weight: bold;
}
The letter-spacing property increases or decreases the space between characters in a text. You can see that the font-family property holds several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.
Now let’s see how to add a video. First I downloaded a sample video from youtube and add it to my relevant folder. I hope you can remember I made a class called “item-a” inside a <div> tag at the beginning . I’m going to add a video to that block.
<div class="item-a">
<video width="450" height="100%" controls>
<source src="nature.mp4" type="video/mp4" >
Your browser does not support HTML video.
</video>
</div>
You will see that video file in my block-a. Play it and check you will be able to watch the video. The controls attribute adds video controls, like play, pause, and volume. It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads. You can add more than one <source> elements. It specifies alternative video files that the browser may choose from. The browser will use the first recognized format. In the above picture, you cannot see any thumbnail for the video. There is a solution for this. You can add poster attributes. The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button. Add the image you need as the thumbnail to the relevant folder and code as follows.
<video width="450" height="100%" poster="bee.jpg" controls>
<source src="nature.mp4" type="video/mp4" >
Ti will display something like this. hope you enjoy making this simple CSS temple with me now you know the basic tricks to design a whole web page. Hope you all find this use full. Hope to meet you with a new blog. Till then, bye!