| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
In CSS, the Grid Layout Module provides a powerful system for creating complex, responsive web layouts. It consists of two main components: the grid container and the grid items.
Grid Container
The grid container is the parent element that holds the grid items. To define a grid container, you use the ‘display: grid‘ or ‘display: inline-grid‘ property. This container establishes a new grid formatting context for its direct children (grid items).
Key Properties of Grid Container
- ‘
display: grid‘: Turns the element into a grid container. - ‘
grid-template-columns‘ and’grid-template-rows‘: Define the number and size of the columns and rows in the grid. - ‘
grid-template-areas‘: Allows you to define areas of the grid. - ‘
gap‘, ‘column-gap‘, ‘row-gap‘: Set the spacing between grid items. - ‘
justify-items‘, ‘align-items‘, ‘justify-content‘, ‘align-content‘: Control the alignment of items within the grid.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Container Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 200px;
gap: 10px;
background-color: #f0f0f0;
padding: 10px;
}
.grid-item {
background-color: #4CAF50;
color: white;
border: 2px solid #ffffff;
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</body>
</html>
Grid Items
Grid items are the children of the grid container. These items can be placed within the grid container using various properties that determine their position, size, and behavior.
Key Properties of Grid Items
- ‘
grid-column-start‘, ‘grid-column-end‘, ‘grid-row-start‘, ‘grid-row-end‘: Define the start and end positions for grid items. - ‘
grid-column‘, ‘grid-row‘: Shorthand for the above properties. - ‘
grid-area‘: Assigns a name to an item for use with ‘grid-template-areas‘. - ‘
justify-self‘, ‘align-self‘: Control the alignment of an individual grid item within its grid cell.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Items Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 100px;
gap: 10px;
background-color: #f0f0f0;
padding: 10px;
}
.grid-item {
background-color: #4CAF50;
color: white;
border: 2px solid #ffffff;
text-align: center;
font-size: 20px;
}
.item1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
.item2 {
grid-column: 3 / 5;
grid-row: 1 / 2;
}
.item3 {
grid-column: 1 / 5;
grid-row: 2 / 3;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">1</div>
<div class="grid-item item2">2</div>
<div class="grid-item item3">3</div>
</div>
</body>
</html>
Detailed Breakdown
1. Grid Container Setup:
- The
display: gridproperty turns the.grid-containerdiv into a grid container. grid-template-columns: repeat(3, 1fr)defines three columns of equal width. The1frunit means one fraction of the available space.grid-template-rows: 100px 200pxdefines two rows with heights of 100px and 200px.gap: 10pxsets a 10px gap between all grid items.
2. Grid Items:
.grid-itemapplies a background color, text color, border, text alignment, and font size to all grid items..item1spans from column 1 to 3 and from row 1 to 2..item2spans from column 3 to 5 and from row 1 to 2..item3spans from column 1 to 5 and from row 2 to 3.
Responsive Design
CSS Grid is also excellent for responsive design. You can use media queries to adjust the grid layout for different screen sizes.
Example of Responsive Grid
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Grid Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
background-color: #f0f0f0;
padding: 10px;
}
.grid-item {
background-color: #4CAF50;
color: white;
border: 2px solid #ffffff;
text-align: center;
font-size: 20px;
}
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.grid-container {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</body>
</html>
In this example:
- For screens wider than 768px, the grid has three columns.
- For screens between 480px and 768px, the grid changes to two columns.
- For screens narrower than 480px, the grid switches to a single column.
