Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
CSS Grid Lines
A strong layout framework for web design is offered by CSS Grid Lines, which give accurate control over the arrangement and alignment of elements. These grid lines, which include both rows and columns, provide an organized framework that makes it easier to design complex and flexible layouts. Developers may easily organize content and adjust its size and orientation for different screens by using predefined templates.
CSS Grid Lines promote more maintainable code by increasing flexibility and removing the need for complex placement hacks. This adaptable tool allows designers to create aesthetically pleasing and dynamic interfaces, completely changing the way web layouts are thought out and executed.
Example
Let's look at the following example, where we are going to place a grid item at column line 2, and end it on column-line 4.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
color: #7D3C98;
text-align: center;
}
.tp {
display: grid;
grid-template-columns: auto auto;
gap: 15px;
background-color: #D5F5E3;
padding: 15px;
}
.tp>div {
background-color: #DE3163;
text-align: center;
padding: 10px 10px;
font-size: 25px;
color: #FDFEFE;
}
.x2 {
grid-column-start: 2;
grid-column-end: 4;
}
</style>
</head>
<body>
<h2>Grid Lines</h2>
<div class="tp">
<div class="x1">1</div>
<div class="x2">2</div>
<div class="x3">3</div>
<div class="x4">4</div>
<div class="x5">5</div>
<div class="x6">6</div>
</div>
</body>
</html>
When we run the above code, it will generate an output consisting of the div box displayed on the webpage.
Example
Considering another scenario, where we are going to place the grid item at row line 2, and end it on row line 5.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
color: #1E8449;
text-align: center;
}
.tp {
display: grid;
grid-template-columns: auto auto;
gap: 15px;
background-color: #FCF3CF;
padding: 15px;
}
.tp>div {
background-color: #CCD1D1;
text-align: center;
padding: 10px 10px;
font-size: 25px;
color: #DE3163;
}
.x2 {
grid-row-start: 2;
grid-row-end: 5;
}
</style>
</head>
<body>
<h2>Grid Lines</h2>
<div class="tp">
<div class="x1">1</div>
<div class="x2">2</div>
<div class="x3">3</div>
<div class="x4">4</div>
<div class="x5">5</div>
<div class="x6">6</div>
</div>
</body>
</html>
On running the above code, the output window will pop up displaying the div box on the webpage.
792 Views
