4.1 The grid-column Property
CSS Grid Layout gives you some awesome tools for managing how items sit in the grid. Among the main tools are the grid-row and grid-column properties. These properties let developers exactly specify which rows and columns grid items should occupy, giving you serious control and flexibility over your layout.
The grid-column property defines which columns the element will take up in the grid container.
Syntax:
.grid-item {
grid-column: start / end;
}
Where:
start: the starting grid lineend: the ending grid line
Example 1: Positioning an element in a specific column
In this example, the element will be placed between the second and third grid lines, occupying the second column:
.grid-item {
grid-column: 2 / 3; /* The element occupies the space between the second and third grid lines */
}
Example 2: Element occupying multiple columns
In this example, the element will take up three columns, starting from the first grid line and ending at the fourth:
.grid-item {
grid-column: 1 / 4; /* The element occupies the space from the first to the fourth grid line */
}
Example 3: Using span to cover multiple columns
In this example, the element will occupy two columns starting from the current position:
.grid-item {
grid-column: span 2; /* The element occupies two columns, starting from its current position */
}
4.2 The grid-row Property
The grid-row property defines which rows the element will occupy in the grid container.
Syntax:
.grid-item {
grid-row: start / end;
}
Where:
start: the starting grid lineend: the ending grid line
Example 1: Positioning an element in a specific row
In this example, the element will be placed between the first and second grid lines, occupying the first row:
.grid-item {
grid-row: 1 / 2; /* The element occupies the space between the first and second grid lines */
}
Example 2: Element occupying multiple rows
In this example, the element will take up two rows, starting from the second grid line and ending at the fourth:
.grid-item {
grid-row: 2 / 4; /* The element occupies the space from the second to the fourth grid line */
}
Example 3: Using span to cover multiple rows
In this example, the element will take up three rows starting from the current position:
.grid-item {
grid-row: span 3; /* The element occupies three rows, starting from its current position */
}
Example 4: Using negative values
.element {
grid-row: 1 / -1; /* The element starts at the first line and ends at the last line */
}
4.3 Combining grid-row and grid-column Properties
To create more complex layouts, you can combine the grid-row and grid-column properties for precise control over item placement.
Example: Complex layout using grid-row and grid-column
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Row and Column Example</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 100px);
gap: 10px;
}
.item1 {
background-color: lightblue;
grid-row: 1 / 3; /* The element occupies the first and second rows */
grid-column: 1 / 3; /* The element occupies the first and second columns */
}
.item2 {
background-color: lightgreen;
grid-row: 3 / 5; /* The element occupies the third and fourth rows */
grid-column: 2 / 5; /* The element occupies the second, third, and fourth columns */
}
.item3 {
background-color: lightcoral;
grid-row: 1 / 2; /* The element occupies the first row */
grid-column: 3 / 5; /* The element occupies the third and fourth columns */
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
</body>
</html>
Explanation:
- The
.containerhas four rows and four columns, each taking up equal space - The
.item1occupies the first two rows and first two columns - The
.item2occupies the third and fourth rows and the second, third, and fourth columns - The
.item3occupies the first row and the third and fourth columns
GO TO FULL VERSION