Bùi Tấn Lực - 135
- 15/10/2025
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, chi tiết như nào hãy cùng chúng tôi phân tích:
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>
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
Bùi Tấn Lực
CEO Bùi Tấn Lực người sáng lập ra Web Mới, là một lập trình viên website, người viết content, chuyên tư vấn các vấn đề về website và SEO website
Chia sẻ nội dung đánh giá của bạn về Thuộc tính grid-area trong CSS
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 *
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 *
Bình luận, Hỏi đáp
Đăng ký tư vấn miễn phí
Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn
