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 Layout
In the early days of web development, developers had to use a variety of tricks and workarounds to arrange elements on the screen in a way that produced results that were consistent across different browsers. However, these days almost everyone uses CSS's most popular layout tools—FlexBox and the Grid. One of the best grid-based websites is Reebok. In this article we are going to learn about the CSS grid layout.
CSS Grid Layout
A two-dimensional layout approach called CSS Grid Layout allows you to arrange content in rows and columns. It takes a top-down approach to layout, permits explicit item overlapping, and offers values for the web page's elements to resize themselves automatically. It is among the most powerful CSS tools out there, making it simple to construct complicated design layouts. Additionally, it has a number of features that make it simple to create responsive websites.
Syntax
Following is the syntax for CSS grid layout −
.class {
display:grid;
}
Example
Let's look at the following example, where we are going to use the display:grid property.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
color: #DE3163;
}
.tp {
display: grid;
grid-template-columns: auto auto;
padding: 110px;
background-color: yellow;
}
.tp-item {
background-color: #D6EAF8;
border: 1px solid #A569BD;
padding: 30px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="tp">
<div class="tp-item">1</div>
<div class="tp-item">2</div>
<div class="tp-item">3</div>
<div class="tp-item">4</div>
</div>
</body>
</html>
When we run the above code, it will generate an output consisting of the div applied with CSS displayed on the webpage.
Example
Considering another scenario, where we are going to use the column-gap property to set the gap between the columns
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
color: #DE3163;
text-align: center;
}
.tp {
display: grid;
column-gap: 30px;
grid-template-columns: auto auto;
background-color: #E8DAEF;
padding: 70px;
}
.tp-item {
background-color: yellow;
border: 1px solid #229954;
padding: 30px;
font-size: 25px;
text-align: center;
}
</style>
</head>
<body>
<h2>column-gap property</h2>
<div class="tp">
<div class="tp-item">1</div>
<div class="tp-item">2</div>
<div class="tp-item">3</div>
<div class="tp-item">4</div>
</div>
</body>
</html>
On running the above code, the output window will pop up, displaying the grid along with a space between the columns on the webpage.
Example
In the following example, we are going to use the row-gap property to set the gap between the rows
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
color: #DE3163;
text-align: center;
}
.tp {
display: grid;
row-gap: 30px;
grid-template-columns: auto auto;
background-color: #CCD1D1;
padding: 80px;
}
.tp-item {
background-color: #D5F5E3;
border: 1px solid #6C3483;
padding: 30px;
font-size: 25px;
text-align: center;
}
</style>
</head>
<body>
<h2>row-gap property</h2>
<div class="tp">
<div class="tp-item">1</div>
<div class="tp-item">2</div>
<div class="tp-item">3</div>
<div class="tp-item">4</div>
</div>
</body>
</html>
When we run the above code, it will generate an output consisting of the div boxes applied with the row-gap property displayed on the webpage.
576 Views
