Thuộc tính grid-area trong CSS
Bùi Tấn Lực - 826
- 15/10/2025
Chức năng của Thuộc tính grid-area trong CSS
Thuộc tính grid-area trong CSS dùng để đặt giá trị cho phần tử con hoặc đặt tên cho phần tử con để phần tử cha dùng thuộc tính grid-template-areas định dạng.
Code Thuộc tính grid-area trong CSS
Thuộc tính grid-area đặt giá trị trong CSS
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end
grid-row-start: Phần tử con đó bắt đầu từ hàng mấy.
grid-row-end: Phần tử con đó trải dọc xuống chiếm mấy hàng hoặc đứng trước hàng thứ mấy.
grid-column-start: Phần tử con đó bắt đầu từ cột thứ mấy.
grid-column-end: Phần tử con đó chiếm mấy cột hoặc kết thúc trước cột mấy.
grid-area: 2 / 1 / span 2 / span 3;
Phần tử con thứ 1 bắt đầu từ hàng 2 và trải dọc xuống chiếm 2 hàng, nó cũng bắt đầu từ cột số 1 và kéo sang phải chiếm 3 cột, các phần tử khác chạy bình thường và không chiếm chổ của phần tử con thứ 1
grid-area: 2 / 1 / span 2 / span 2;
Phần tử con thứ 2 bắt đầu từ hàng 2 và trải dọc xuống chiếm 2 hàng, nó cũng bắt đầu từ cột số 1 và kéo sang phải chiếm 2 cột, các phần tử khác chạy bình thường và không chiếm chổ của phần tử con thứ 2
grid-area: 2 / 1 / 4 / span 2;
Phần tử con thứ 2 bắt đầu từ hàng 2 và trải dọc xuống trước hàng 4, nó cũng bắt đầu từ cột số 1 và kéo sang phải chiếm 2 cột, các phần tử khác chạy bình thường và không chiếm chổ của phần tử con thứ 2
grid-area: 2 / 1 / 4 / 4;
Phần tử con thứ 2 bắt đầu từ hàng 2 và trải dọc xuống trước hàng 4, nó cũng bắt đầu từ cột số 1 và kết thúc trước cột 4, các phần tử khác chạy bình thường và không chiếm chổ của phần tử con thứ 2
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính grid-area đặt giá trị trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.divcha{background:red; width:100%; height:auto; margin-bottom:10px; display: grid; grid-gap: 10px; padding: 10px; grid-template-columns: auto auto auto auto;}
.divcha div {background:green; color:#fff; text-align: center; padding: 20px 0; font-size: 25px;}
</style>
</head>
<body>
<h1>Thuộc tính grid-area đặt giá trị trong CSS</h1>
<p>grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end</p>
<h4>grid-area: 2 / 1 / span 2 / span 3; Phần tử con thứ 1 bắt đầu từ hàng 2 và trải dọc xuống chiếm 2 hàng, nó cũng bắt đầu từ cột số 1 và kéo sang phải chiếm 3 cột, các phần tử khác chạy bình thường và không chiếm chổ của phần tử con thứ 1</h4>
<div class="divcha">
<div style="grid-area: 2 / 1 / span 2 / span 3;">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
<h4>grid-area: 2 / 1 / span 2 / span 2; Phần tử con thứ 2 bắt đầu từ hàng 2 và trải dọc xuống chiếm 2 hàng, nó cũng bắt đầu từ cột số 1 và kéo sang phải chiếm 2 cột, các phần tử khác chạy bình thường và không chiếm chổ của phần tử con thứ 2</h4>
<div class="divcha">
<div>1</div>
<div style="grid-area: 2 / 1 / span 2 / span 2;">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<h4>grid-area: 2 / 1 / 4 / span 2; Phần tử con thứ 2 bắt đầu từ hàng 2 và trải dọc xuống trước hàng 4, nó cũng bắt đầu từ cột số 1 và kéo sang phải chiếm 2 cột, các phần tử khác chạy bình thường và không chiếm chổ của phần tử con thứ 2</h4>
<div class="divcha">
<div>1</div>
<div style="grid-area: 2 / 1 / 4 / span 2;">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<h4>grid-area: 2 / 1 / 4 / 4; Phần tử con thứ 2 bắt đầu từ hàng 2 và trải dọc xuống trước hàng 4, nó cũng bắt đầu từ cột số 1 và kết thúc trước cột 4, các phần tử khác chạy bình thường và không chiếm chổ của phần tử con thứ 2</h4>
<div class="divcha">
<div>1</div>
<div style="grid-area: 2 / 1 / 4 / 4;">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>
Thuộc tính grid-area đặt tên trong CSS
Phần tử con dùng grid-area: myArea; để đặt tên myArea cho phần tử con (tên này thay đổi tùy theo ý bạn), sau đó trong phần tử cha dùng grid-template-areas: 'myArea myArea myArea . .'; để quy định phần tử con đó thuộc hàng mấy và chiếm mấy cột, phía sau phần tử con đó có mấy cột:
grid-template-areas: 'myArea myArea myArea . .';
Phần tử con thứ 1 sẽ chiếm 3 cột đầu tiên của hàng 1, các phần tử còn lại chạy bình thường, 2 dấu chấm tức là sau phần tử được chỉ định sẽ có thêm 2 cột (mỗi dấu chấm cách nhau khoảng trống)
grid-template-areas: 'phantu1 phantu1 phantu1 phantu1 phantu1'
'phantu2 phantu2 phantu2 . .';
Phần tử con thứ 1 sẽ chiếm 5 cột của hàng 1, Phần tử con thứ 2 sẽ chiếm 3 cột đầu tiên của hàng 2 (2 dấu chấm tức là sau phần tử thứ 2 sẽ có thêm 2 cột), các phần tử còn lại chạy bình thường
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính grid-area đặt tên trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.divcha{background:red; width:100%; height:auto; margin-bottom:10px; display: grid; grid-gap: 10px; padding: 10px;}
.divcha div {background:green; color:#fff; text-align: center; padding: 20px 0; font-size: 25px;}
</style>
</head>
<body>
<h1>Thuộc tính grid-area đặt tên trong CSS</h1>
<p>Quy định những phần tử con được chỉ định ở hàng thứ mấy và chiếm mấy cột của hàng đó, những phần tử con khác chạy bình thường và không chiếm chổ của các phần tử con được chỉ định:</p>
<h4>grid-template-areas: 'myArea myArea myArea . .'; Phần tử con thứ 1 sẽ chiếm 3 cột đầu tiên của hàng 1, các phần tử còn lại chạy bình thường, 2 dấu chấm tức là sau phần tử được chỉ định sẽ có thêm 2 cột (mỗi dấu chấm cách nhau khoảng trống)</h4>
<div class="divcha" style="grid-template-areas: 'myArea myArea myArea . .';">
<div style="grid-area: myArea;">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h4>grid-template-areas: 'phantu1 phantu1 phantu1 phantu1 phantu1' 'phantu2 phantu2 phantu2 . .'; Phần tử con thứ 1 sẽ chiếm 5 cột của hàng 1, Phần tử con thứ 2 sẽ chiếm 3 cột đầu tiên của hàng 2 (2 dấu chấm tức là sau phần tử thứ 2 sẽ có thêm 2 cột), các phần tử còn lại chạy bình thường</h4>
<div class="divcha" style="grid-template-areas: 'phantu1 phantu1 phantu1 phantu1 phantu1' 'phantu2 phantu2 phantu2 . .';">
<div style="grid-area: phantu1;">1</div>
<div style="grid-area: phantu2;">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
Ứng dụng thuộc tính grid-area để xây dựng bố cục CSS Grid
Thuộc tính grid-area giúp xác định vị trí và phạm vi chiếm chỗ của một phần tử bên trong CSS Grid. Nhờ đó, bạn có thể đưa từng thành phần vào đúng khu vực mong muốn mà không cần thay đổi thứ tự HTML.
Đặt phần tử vào vị trí cụ thể trong CSS Grid
Với cách sử dụng dạng grid-area: hàng-bắt-đầu / cột-bắt-đầu / hàng-kết-thúc / cột-kết-thúc;, phần tử có thể được chỉ định trực tiếp từ đường kẻ Grid. Cách này phù hợp khi bố cục cần kiểm soát chính xác vị trí của từng thành phần.
.container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: auto auto;
}
.item {
grid-area: 1 / 2 / 2 / 3;
}
Trong ví dụ trên, phần tử .item bắt đầu từ đường hàng thứ nhất, đường cột thứ hai và kết thúc tại đường hàng thứ hai, đường cột thứ ba. Vì vậy, phần tử được đặt vào ô nằm ở cột thứ hai của hàng đầu tiên.
Cho phần tử trải rộng trên nhiều hàng và cột
grid-area không chỉ dùng để xác định một ô mà còn cho phép phần tử mở rộng qua nhiều hàng hoặc cột. Chỉ cần thay đổi đường kết thúc, bạn có thể tạo các vùng lớn hơn cho nội dung nổi bật.
.item {
grid-area: 1 / 1 / 3 / 3;
}
Với thiết lập này, phần tử bắt đầu tại hàng 1, cột 1 và kéo dài đến trước hàng 3, cột 3, tương ứng với phạm vi hai hàng và hai cột. Đây là cách hữu ích khi xây dựng khu vực nội dung chính, banner hoặc thành phần cần chiếm diện tích lớn trong bố cục.
Kết hợp grid-area với grid-template-areas
Khi bố cục có nhiều khu vực rõ ràng như đầu trang, thanh bên, nội dung chính và chân trang, grid-area có thể được dùng với tên khu vực đã khai báo bằng grid-template-areas. Cách này giúp CSS dễ đọc hơn vì vị trí được thể hiện bằng tên thay vì các con số đường kẻ.
.container {
display: grid;
grid-template-columns: 220px 1fr;
grid-template-areas:
"sidebar main";
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
Ở đây, mỗi phần tử được gán vào một khu vực có tên tương ứng. Khi cần thay đổi bố cục, bạn chỉ việc điều chỉnh cấu trúc grid-template-areas mà không nhất thiết phải thay đổi HTML.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính grid-area trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
