| 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 Grid Layout, the grid is a two-dimensional system that can handle both columns and rows. It provides a flexible way to create complex layouts without using floats or positioning. Here’s a deep dive into grid lines, tracks, and cells with examples:
Grid Lines
Grid lines are the lines that divide the grid into rows and columns. They are numbered starting from 1 at the start of the grid, increasing by 1 at each subsequent line.
Example:
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px;
}
In the above example:
- Columns are divided by grid lines 1, 2, 3, and 4.
- Rows are divided by grid lines 1, 2, and 3.
<div class="grid-container">
<div style="grid-column: 1 / 3; grid-row: 1 / 2;">A</div>
<div style="grid-column: 3 / 4; grid-row: 1 / 3;">B</div>
<div style="grid-column: 1 / 2; grid-row: 2 / 3;">C</div>
</div>
Grid Tracks
Grid tracks are the spaces between two adjacent grid lines. They can be either rows or columns.
Example:
.grid-container {
display: grid;
grid-template-columns: 150px 100px 200px;
grid-template-rows: 100px 200px;
}
In this example:
- There are three column tracks with widths of 150px, 100px, and 200px.
- There are two row tracks with heights of 100px and 200px.
Grid Cells
A grid cell is the smallest unit of a grid, formed by the intersection of a row and a column. Each cell is defined by the space between four grid lines.
Example:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
In this example:
- The grid has three equal-width columns and two equal-height rows.
- Each cell is 1/3 of the container width and 1/2 of the container height.
<div class="grid-container">
<div style="grid-column: 1 / 2; grid-row: 1 / 2;">Cell 1</div>
<div style="grid-column: 2 / 3; grid-row: 1 / 2;">Cell 2</div>
<div style="grid-column: 3 / 4; grid-row: 1 / 2;">Cell 3</div>
<div style="grid-column: 1 / 2; grid-row: 2 / 3;">Cell 4</div>
<div style="grid-column: 2 / 3; grid-row: 2 / 3;">Cell 5</div>
<div style="grid-column: 3 / 4; grid-row: 2 / 3;">Cell 6</div>
</div>
Putting It All Together
Here is a comprehensive example showing the usage of grid lines, tracks, and cells:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 200px;
gap: 10px; /* space between grid items */
}
.grid-item {
background-color: lightblue;
border: 1px solid #333;
text-align: center;
line-height: 100px;
}
<div class="grid-container">
<div class="grid-item" style="grid-column: 1 / 2; grid-row: 1 / 2;">1</div>
<div class="grid-item" style="grid-column: 2 / 4; grid-row: 1 / 2;">2</div>
<div class="grid-item" style="grid-column: 1 / 3; grid-row: 2 / 3;">3</div>
<div class="grid-item" style="grid-column: 3 / 4; grid-row: 2 / 3;">4</div>
</div>
In this example:
- The grid container is defined with three equal-width columns and two rows of 100px and 200px.
- There is a 10px gap between grid items.
- The grid items span different numbers of columns and rows to create various layouts.
Understanding these core concepts of CSS Grid Layout helps in building complex and responsive web layouts efficiently.
