Tự code rồi chạy thử... Chạy Thử

<!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>

Thuộc tính grid-area đặt tên trong CSS

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:

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

Thuộc tính grid-area đặt tên trong CSS nằm trong bài viết Thuộc tính grid-area trong CSS