CSS Responsive Grid View
Most of the web pages consist of the grid layout, which means the page is divided into rows and columns. With the help of this grid layout, we can place the rows and columns on the webpage very easily and efficiently. It allows us to split any row into 12 columns with a maximum width of 100%. When we resize the browser, these grid elements will shrink and expand according to the screen size.
Creating a Responsive Grid-view in CSS
To create a responsive grid view, we have to set the box-sizing property having a value border-box for all the elements in a web page. This will include the padding and border of the element into the height and width of the element.
- The given syntax is used to set any CSS property globally, or we can say for all the HTML elements.
* {
box-sizing: border-box;
}
- We have created a header using the <div> element and assigns the
.header class to set the CSS properties for the header element. The CSS properties which are specified for the header are given below:
.header {
border: 1px solid blue;
padding: 15px;
}
- Then we have created another <div> for the main menu and assigns the class
.menu. We have created an unordered list using <ul> element add the <li> elements for the list items inside that <div>. The CSS properties applied to this element are given below:
.menu {
width: 25%;
float: left;
padding: 15px;
border: 1px solid blue;
}
And then, the third <div> is used to create a description column and assigns the class .main. The CSS properties applied to this element is given below:
.main {
width: 75%;
float: left;
padding: 15px;
border: 1px solid blue;
}
HTML Code
Here is the proper HTML and CSS code of the above explanation given:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Responsive Grid</title>
<style>
* {
box-sizing: border-box;
}
.header {
border: 1px solid blue;
padding: 15px;
}
.menu {
width: 25%;
float: left;
padding: 15px;
border: 1px solid blue;
}
.main {
width: 75%;
float: left;
padding: 15px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="header">
<h1>Studytonight</h1>
</div>
<div class="menu">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Bootstrap 4</li>
<li>JavaScript</li>
</ul>
</div>
<div class="main">
<h1>Studytonight</h1>
<p>In a world where so much is being done for technology and so little for the environment, education is not even a part of most discussions. We at Studytonight believe that by widening the reach of education, by making it freely available, so much can be achieved.</p>
<p><strong>Resize the browser window to see how the content respond to the resizing.</strong></p>
</div>
</body>
</html>
Output:
Live Example : Creating responsive grid-layout using CSS
Here is the demonstration of how to create a responsive grid layout using only HTML and CSS. When you resize the browser, then you will see how the grid layout change on different screen sizes without overlapping another element.
Conclusion
In this lesson, we have learned how to create a responsive grid layout having rows and columns using CSS properties.
