What is CSS Grid?
- It is a grid-based layout system, with rows and columns.
- CSS Grid layout is used to make easily web page design.
- It offers a convenient layout for a web page.
- A grid layout consists of a parent element, with one or more child elements.
- Display property grid is used to create a grid container
This will be our basic boilerplate code for CSS Grid Layout Property
index.html
<!DOCTYPE html>
<html>
<head>
<title> CSS Grid Layout </title>
<style>
</style>
</head>
<body>
<div class="grid-container">
<div> One </div>
<div> Two </div>
<div> Three </div>
<div> Four </div>
<div> Five </div>
<div> Six </div>
</div>
</body>
</html>
CSS Grid Properties
i) grid
Display property grid is to make an HTML element behave like a grid container
.grid-container {
display: grid;
}
ii) grid-template-columns
This property defines the number of columns in grid layout, and it can also define the width of each column.
.grid-container {
grid-template-columns: 200px auto 400px;
}
iii) grid-template-rows
The grid-template-rows property defines the height of each row.
.grid-container {
grid-template-rows: 80px 100px;
}
iv) justify-content
This property is used to align the whole grid inside the container.
.grid-container {
justify-content: space-between;
}
v) align-content
This property is used to vertically align the whole grid inside the container.
.grid-container {
align-content: center;
}
CSS Grid Layout Examples
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> CSS Grid Layout </title>
<style>
.grid-container {
display: grid;
grid-template-columns: 200px auto 400px;
grid-template-rows: 80px 100px;
gap: 10px;
background-color: #e65b00;
padding: 10px;
}
.grid-container div {
background-color: #fff;
text-align: center;
padding: 20px 0;
font-size: 24px;
}
</style>
</head>
<body>
<div class="grid-container">
<div> One </div>
<div> Two </div>
<div> Three </div>
<div> Four </div>
<div> Five </div>
<div> Six </div>
</div>
</body>
</html>
Output:
helpful CSS grid properties cheatsheet 👏🏻👏🏻
ReplyDeleteThank you so much. Glad to know this is helpful for you 😊
Delete