4.1 Thuộc tính grid-column
CSS Grid Layout cung cấp công cụ mạnh mẽ để quản lý phân bổ các phần tử trong lưới. Một trong những công cụ cơ bản là các thuộc tính grid-row và grid-column. Những thuộc tính này cho phép lập trình viên chỉ định chính xác các dòng và cột mà phần tử grid cần chiếm, cung cấp sự linh hoạt và kiểm soát chi tiết với layout.
Thuộc tính grid-column xác định các cột mà phần tử sẽ chiếm trong grid-container.
Cú pháp:
.grid-item {
grid-column: start / end;
}
Nơi:
start: dòng bắt đầu của gridend: dòng kết thúc của grid
Ví dụ 1: Đặt phần tử vào cột nhất định
Trong ví dụ này, phần tử sẽ được đặt giữa dòng thứ hai và thứ ba của grid, chiếm cột thứ hai:
.grid-item {
grid-column: 2 / 3; /* Phần tử chiếm không gian giữa dòng thứ hai và thứ ba của grid */
}
Ví dụ 2: Phần tử chiếm nhiều cột
Trong ví dụ này, phần tử sẽ chiếm ba cột, bắt đầu từ dòng đầu tiên và kết thúc tại dòng thứ tư của grid:
.grid-item {
grid-column: 1 / 4; /* Phần tử chiếm không gian từ dòng đầu tiên đến dòng thứ tư của grid */
}
Ví dụ 3: Sử dụng span để bao phủ nhiều cột
Trong ví dụ này, phần tử sẽ chiếm hai cột, bắt đầu từ vị trí hiện tại:
.grid-item {
grid-column: span 2; /* Phần tử chiếm hai cột, bắt đầu từ vị trí hiện tại */
}
4.2 Thuộc tính grid-row
Thuộc tính grid-row xác định các dòng mà phần tử sẽ chiếm trong grid-container.
Cú pháp:
.grid-item {
grid-row: start / end;
}
Nơi:
start: dòng bắt đầu của gridend: dòng kết thúc của grid
Ví dụ 1: Đặt phần tử vào dòng nhất định
Trong ví dụ này, phần tử sẽ được đặt giữa dòng đầu tiên và dòng thứ hai của grid, chiếm dòng đầu tiên:
.grid-item {
grid-row: 1 / 2; /* Phần tử chiếm không gian giữa dòng đầu tiên và dòng thứ hai của grid */
}
Ví dụ 2: Phần tử chiếm nhiều dòng
Trong ví dụ này, phần tử sẽ chiếm hai dòng, bắt đầu từ dòng thứ hai và kết thúc tại dòng thứ tư của grid:
.grid-item {
grid-row: 2 / 4; /* Phần tử chiếm không gian từ dòng thứ hai đến dòng thứ tư của grid */
}
Ví dụ 3: Sử dụng span để bao phủ nhiều dòng
Trong ví dụ này, phần tử sẽ chiếm ba dòng, bắt đầu từ vị trí hiện tại:
.grid-item {
grid-row: span 3; /* Phần tử chiếm ba dòng, bắt đầu từ vị trí hiện tại */
}
Ví dụ 4. Sử dụng giá trị âm
.element {
grid-row: 1 / -1; /* Phần tử bắt đầu từ dòng đầu tiên và kết thúc tại dòng cuối cùng */
}
4.3 Kết hợp các thuộc tính grid-row và grid-column
Để tạo layout phức tạp hơn, bạn có thể kết hợp các thuộc tính grid-row và grid-column
để quản lý chính xác việc sắp đặt các phần tử.
Ví dụ: Layout phức tạp sử dụng grid-row và 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; /* Phần tử chiếm dòng đầu tiên và thứ hai */
grid-column: 1 / 3; /* Phần tử chiếm cột đầu tiên và thứ hai */
}
.item2 {
background-color: lightgreen;
grid-row: 3 / 5; /* Phần tử chiếm dòng thứ ba và thứ tư */
grid-column: 2 / 5; /* Phần tử chiếm cột thứ hai, thứ ba và thứ tư */
}
.item3 {
background-color: lightcoral;
grid-row: 1 / 2; /* Phần tử chiếm dòng đầu tiên */
grid-column: 3 / 5; /* Phần tử chiếm cột thứ ba và thứ tư */
}
</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>
Giải thích:
- Container
.containercó bốn dòng và bốn cột, mỗi dòng và cột chiếm không gian bằng nhau - Phần tử
.item1chiếm hai dòng đầu tiên và hai cột đầu tiên - Phần tử
.item2chiếm dòng thứ ba và thứ tư và cột thứ hai, thứ ba và thứ tư - Phần tử
.item3chiếm dòng đầu tiên và cột thứ ba và thứ tư
GO TO FULL VERSION