| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
Here explain each of these CSS Grid properties in detail along with examples to demonstrate their use.
1. grid-template-rows
This property defines the number and size of the rows in a grid container.
Syntax:
grid-template-rows: <track-size> ... | <line-name> <track-size> ... ;
Example:
.container {
display: grid;
grid-template-rows: 100px 200px auto;
}
This creates a grid with three rows: the first row is 100px tall, the second is 200px, and the third row will automatically adjust to fit the content.
2. grid-template-columns
This property defines the number and size of the columns in a grid container.
Syntax:
grid-template-columns: <track-size> ... | <line-name> <track-size> ... ;
Example:
.container {
display: grid;
grid-template-columns: 100px 1fr 2fr;
}
This creates a grid with three columns: the first column is 100px wide, the second column takes up one fraction of the remaining space, and the third column takes up two fractions of the remaining space.
3. grid-template-areas
This property defines a grid template by referencing the names of the grid areas which are specified with the ‘grid-area‘ property of the grid items.
Syntax:
grid-template-areas: "header header header"
"main main sidebar"
"footer footer footer";
Example:
.container {
display: grid;
grid-template-areas:
"header header header"
"main main sidebar"
"footer footer footer";
grid-template-rows: 100px 1fr 50px;
grid-template-columns: 1fr 1fr 1fr;
}
.header {
grid-area: header;
}
.main {
grid-area: main;
}
.sidebar {
grid-area: sidebar;
}
.footer {
grid-area: footer;
}
This defines a grid with four named areas: ‘header‘, ‘main‘, ‘sidebar‘, and ‘footer‘.
4. gap
This property sets the gaps (gutters) between rows and columns.
Syntax:
gap: <row-gap> <column-gap>;
Example:
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 100px;
gap: 10px 20px;
}
This sets a 10px gap between rows and a 20px gap between columns.
5. justify-items
This property aligns grid items along the inline (row) axis within their grid areas.
Values:
startendcenterstretch(default)
Syntax:
justify-items: <value>;
Example:
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 100px;
justify-items: center;
}
This centers all grid items horizontally within their grid areas.
6. align-items
This property aligns grid items along the block (column) axis within their grid areas.
Values:
startendcenterstretch(default)
Syntax:
align-items: <value>;
Example:
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 100px;
align-items: center;
}
This centers all grid items vertically within their grid areas.
Putting It All Together
Here’s a complete example using all the properties:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: grid;
grid-template-areas:
"header header header"
"main main sidebar"
"footer footer footer";
grid-template-rows: 100px 1fr 50px;
grid-template-columns: 1fr 2fr 1fr;
gap: 10px 20px;
justify-items: center;
align-items: center;
}
.header {
grid-area: header;
background-color: lightblue;
}
.main {
grid-area: main;
background-color: lightgreen;
}
.sidebar {
grid-area: sidebar;
background-color: lightcoral;
}
.footer {
grid-area: footer;
background-color: lightgoldenrodyellow;
}
</style>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="main">Main Content</div>
<div class="sidebar">Sidebar</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
In this example, we have a grid container with four areas: header, main content, sidebar, and footer. The gaps between rows and columns are specified, and all items are centered both horizontally and vertically within their grid areas.
