Grid
When a webpage is viewed on different devices, it can look different on each device. Sometimes the content may be missed due to the change in the size of the device. To make a webpage appear the same on all devices we can use responsive web designing. HTML and CSS are used for designing.
Viewport: The user’s visible area on a webpage is known as the viewport. < meta> tag introduced in HTML5 can be used to make a webpage responsive. The selector is the element that needs to be styled. We can have multiple properties and values according to your requirements.
A grid-based layout system is offered by CSS Grid Layout Module which has rows and columns. Designing web pages becomes easier with the use of grid. The layout contains a parent element followed by one or more child elements. To make an element a grid container, display property must be set to grid or inline grid.
Some grid properties are as follows:
Example No.1:
<![CDATA[
<html>
<html lang="en-US">
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>Knowledge2life</h1>
<div class="grid-container">
<div class="grid-item">Knowledge2life 1</div>
<div class="grid-item">Knowledge2life 2</div>
<div class="grid-item">Knowledge2life 3</div>
</div>
</body>
</html>]]>
OUTPUT:
Knowledge2life
Knowledge2life 1
Knowledge2life 2
Knowledge2life 3
Example No.2:
<![CDATA[
<html>
<html lang="en-US">
<style>
.grid-container {
display: grid;
grid-column-gap: 50px;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Knowledge2life</h1>
<div class="grid-container">
<div class="grid-item">Knowledge2life 1</div>
<div class="grid-item">Knowledge2life 2</div>
<div class="grid-item">Knowledge2life 3</div>
</body>
</html>
]]>
OUTPUT:
Knowledge2life
Knowledge2life 1
Knowledge2life 2
Knowledge2life 3
